Aurelia / Typescript - 如何通过select标签将对象绑定到变​​量

Question

所以，我在JSON中有一个静态的对象数组。我已成功填充了包含这些选项的select标记，并将select标记的每个选项的值设置为对象ID。

tvs: any[] = [
        { "id": 1, "ip": "11.11.11.111", "port": "8080", "name": "tv 1" },
        { "id": 2, "ip": "11.11.11.111", "port": "8080", "name": "tv 2" },
        { "id": 3, "ip": "11.11.11.111", "port": "8080", "name": "tv 3" },
        { "id": 4, "ip": "11.11.11.111", "port": "8080", "name": "tv 4" },
        { "id": 5, "ip": "11.11.11.111", "port": "8080", "name": "tv 5" },
        { "id": 6, "ip": "11.11.11.111", "port": "8080", "name": "tv 6" }
    ];

然后在我的html文件中：

<div class="col-md-6 col-lg-6">
     <label>Which tv do you want to alter?</label>
     <select class="form-control">
          <option repeat.for="tv of tvs" value="${tv.id}">${tv.name}</option>
     </select>
</div>

这很好用，但是我想在这个下面添加一个动态div，让它根据所选对象进行更改和显示信息。例如，如果用户在select标签中选择tv 5，我希望它显示tv 5的信息。如何将所选对象绑定到某个位置以便我可以完成此操作？

Answer 1

Aurelia提供model.bind用于option内的select个元素。对于你的例子，这样的事情应该有效：

<div class="col-md-6 col-lg-6">
   <label>Which tv do you want to alter?</label>
   <select class="form-control" value.bind="selectedTV">
      <option repeat.for="tv of tvs" model.bind="tv">${tv.name}</option>
   </select>
</div>
<div if.bind="selectedTV">
  Info for TV ${selectedTV.name}:<br>
  ip: ${selectedTV.ip}<br>
  etc...
</div>