我将尽力使其尽可能简单。
我们有一个电台列表,每个电台最多可以设置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);
我不希望在每次更新后不必重置频道,这似乎有些过分。