repeat.for 内的 Aurelia repeat.for

Question

我会尽量保持简单。

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

每个站您可以更改4个站中的任何一个。表格下方还有一个摘要 table，其中显示了所选择的内容。

在下面的摘要 table 上对电台级别所做的任何更改都会更新，但对频道的任何更新都不会。我想知道这是否与此处的答案有关

我比较疑惑的是，如果台显示更新了，但是频道没有更新。

这里是代码的简化版本

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;
}

<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>

如果我在每个电台更新后重置频道，只有这样摘要才会更新。我通过使用地图重新映射站点来做到这一点，即； this.activeStation.channels = this.activeStation.channels.map(station);

我希望每次更新后不必重置频道，这似乎有点过分了。

Answer 1

问得好。您观察到的行为是因为 div.summary 元素内 <div/> 处的 repeat 看不到数组的更改，因为突变是通过索引 setter 完成的（导致通过 <select/> 绑定）。所以我们有两个选择：

对每个channels数组进行变异station通知数组观察者
让 repeat 知道数组内部的变化。

对于 (2)，我们可以按照您的方式进行，也可以采用值转换器方式来避免在编辑时修改源数组。您可以在此处查看示例 https://codesandbox.io/s/httpsWhosebugcomquestions59571360aurelia-repeat-for-within-repeat-for-yuwwv

对于 (1)，我们需要通过 change 事件

解决 select 的手动更改处理

编辑：在 v2 中，我们已经解决了这个问题，因此它可以正常且自然地工作，而无需我们添加这些解决方法。

repeat.for 内的 Aurelia repeat.for

Aurelia repeat.for within repeat.for

aurelia