typescript - Aurelia/Typescript - 如何通过选择标签将对象绑定(bind)到变​​量

Question

所以，我有一个 JSON 格式的静态对象数组。我已经成功地使用这些选项填充了一个选择标签，并将选择标签的每个选项的值设置为对象 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 的信息。如何将所选对象绑定(bind)到某个对象以便完成此操作？

Answer 1

Aurelia 提供 model.bind 用于 select 内的 option 元素。对于您的示例，这样的事情应该有效:

<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>