Aurelia repeat.for repeat.for

Question

我会尽量让这件事简单化。

我们有一个站的列表，每个站有能力有多达4个频道设置。

每个站你可以改变这四个站的任何一个。表格下面还有一个汇总表，显示了所选择的内容。

在下面的汇总表中，对站点级别的任何更改都会更新，但是对通道的任何更新都不会。我想知道这是否与这里的答案有关https://stackoverflow.com/a/42629584/9431766

我所困惑的是，如果站显示更新，但频道不更新。

下面是代码的简化版本

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>

如果在每个站更新后重新设置频道，则只有在此之后才会进行摘要更新。我通过使用map重新绘制站点的地图(即；this.activeStation.channels = this.activeStation.channels.map(station); )来实现这一点。

我宁愿不必在每次更新后重新设置频道，这似乎有点过火。

Answer 1

问得好。您所观察到的行为是因为repeat位于div.summary元素内的<div/>无法看到对数组的更改，因为突变是通过索引设置器(由<select/>绑定引起)完成的。所以我们有两个选择：

1. 对每个station的channels数组进行突变，通知数组观察者
2. ，使重复知道数组中的变化。

对于(2)，我们可以以您的方式完成，也可以使用值转换器的方式来避免在编辑时修改源数组。您可以在这里看到一个例子，https://codesandbox.io/s/httpsstackoverflowcomquestions59571360aurelia-repeat-for-within-repeat-for-yuwwv

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

编辑:在v2中，我们已经修复了这个问题，这样它就可以正常工作了&当然，我们不必在周围添加这些工作。