Aurelia repeat.for内部repeat.for

我会尽量让这件事尽可能简单

我们有一个电台列表，每个电台最多可以设置4个频道

每个电台都可以更改4个电台中的任意一个。 表格下方还有一个汇总表，显示所选内容

对电台级别所做的任何更改都会在下表中更新，但对频道的任何更新都不会更新。我想知道这是否与这里的答案有关

我感到困惑的是，如果电台显示更新，但频道不更新

下面是代码的简化版本

constructor() {
  this.stations = [
    {
      name: 'Station 1',
      channels: [null, null, null, null]
    },
    {
      name: 'Station 2',
      channels: [null, null, null, null]
    },
    {
      name: 'Station 3',
      channels: [null, null, null, null]
    }
  ];

  this.channels = [
    { id: 1, name: 'Channel 1' },
    { id: 2, name: 'Channel 2' },
    { id: 3, name: 'Channel 3' },
    { id: 4, name: 'Channel 4' },
  ];

  this.activeStation = {}
}

editStation(station) {
  this.activeStation = station;
}

${station.name}
${channel？channel.name:'N/A'}
编辑

如果我在每个电台更新频道后重置频道，则只有在更新频道后，才会更新摘要。 我通过使用地图重新绘制车站地图来实现这一点，即；

this.activeStation.channels=this.activeStation.channels.map（站点）

我不希望每次更新后都要重置频道，这似乎有点过头了。
问得好。您观察到的行为是因为
div.summary
元素中的
repeat
无法看到数组的更改，因为变异是通过索引设置器完成的（由
绑定引起的）。因此，我们有两种选择：

对每个
站的
通道
阵列进行变异
通知阵列观察者
使repeat了解阵列内部的更改
对于（2），我们可以用您的方式来做，也可以用值转换器的方式来避免在编辑时修改源数组。你可以在这里看到一个例子

对于（1），我们需要通过
change
事件解决
select
的手动更改处理

编辑：在v2中，我们已经解决了这个问题，因此它将正常自然地工作，而无需我们添加这些解决方法。
问题很好。您观察到的行为是因为
div.summary
元素中的
repeat
无法看到数组的更改，因为变异是通过索引设置器完成的（由
绑定引起的）。因此，我们有两种选择：

对每个
站的
通道
阵列进行变异
通知阵列观察者
使repeat了解阵列内部的更改
对于（2），我们可以用您的方式来做，也可以用值转换器的方式来避免在编辑时修改源数组。你可以在这里看到一个例子

对于（1），我们需要通过
change
事件解决
select
的手动更改处理

编辑：在v2中，我们已经解决了这个问题，因此它将正常正常工作，而无需我们添加这些工作。
hey@bigopon，感谢您的回复。我将查看您的解决方案，看看它是否比我目前使用的解决方案更好，然后等待v2出现，我们将在它出现时移植到v2。嘿@bigopon，谢谢您的回复。我将查看您的解决方案，看看它是否比我目前使用的解决方案更有效，然后等待v2出现，我们将在它出现时进行移植
<div class="station">
  <input value.bind="activeStation.name"/>
  <div repeat.for="select of activeStation.channels">
    <select value.bind="activeStation.channel[$index]">
      <option model.bind="item" repeat.for="item of channels"></option>
    </select>
  </div>
</div>

<div class="summary">
  <div repeat.form="station of stations">
    <h3>${station.name}</h3>
    <div repeat.for="channel of station.channels">
      ${channel ? channel.name : 'N/A'}
    </div>
    <div class="edit"><a click.delegate="editStation(station)">Edit</a></div>
  </div>
</div>