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>