Aurelia repeat.for在内部重复。

我将尽力使其尽可能简单。

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

每个电台都可以更改4个电台中的任何一个。 表单下方还有一个汇总表,显示选择的内容。

对以下汇总表中的站级更新进行的任何更改,但对频道的任何更新均不进行。我想知道这是否与这里的答案有关https://stackoverflow.com/a/42629584/9431766

我很困惑的是,如果电视台的显示屏更新了,但是频道没有更新。

这是代码的简化版本

constructor() {
  this.stations = [
    {
      name: 'Station 1',channels: [null,null,null]
    },{
      name: 'Station 2',{
      name: 'Station 3',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);

我不希望在每次更新后不必重置频道,这似乎有些过分。

meihaoyong 回答:Aurelia repeat.for在内部重复。

好问题。您观察到的行为是因为repeat元素内<div/>处的div.summary看不到数组的更改,因为突变是通过索引设置器完成的(由{{1 }} 捆绑)。因此,我们有2个选择:

  1. 将每个<select/>的{​​{1}}数组更改为变量,以通知数组观察者
  2. 使重复知道阵列内部的变化。

对于(2),我们可以按照您的方式或使用值转换器的方式来执行此操作,以避免在编辑时修改源数组。您可以在这里https://codesandbox.io/s/httpsstackoverflowcomquestions59571360aurelia-repeat-for-within-repeat-for-yuwwv

查看示例

对于(1),我们需要解决通过channels事件对station进行手动更改的情况

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

本文链接:https://www.f2er.com/2827579.html

大家都在问