Aurelia/Typcript - Как связать объект с переменной через тег select

Question

Итак, у меня есть статический массив объектов в JSON. Я успешно заполнил выбранный тег этими параметрами и задал значение каждой опции тега select идентификатору объекта.

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 ниже этого, и иметь его изменить и показать информацию, основанную на выбранном объекте. Например, если пользователь выбирает tv 5 в теге select, я хочу, чтобы он отображал информацию для 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>