Aurelia массив связывания с Флажок выбора и ссылки элемента отключить

Question

Я пытаюсь выполнить следующие действия без использования дополнительных пользовательских функций:

• магазин выбранных элементов в новом массиве позволяют
• только текстовое поле, если ее соответствующий флажок был выбран
• уследить обновленные значения в новом массиве

Ниже приведен упрощенный пример моего кода:

<div repeat.for="item of itemSearch.rates"> 
    <input type="checkbox" ref="item.$index" model.bind="item" checked.bind="selectedRates"> 
    <input type="text" disabled.bind="item.$index.checked == false" value.bind="item.total_value"> 
</div> 

В настоящее время, с вышеуказанным, работает только checked.bind. Выбранные элементы сохраняются в моем новом массиве selectedRates.

Однако мой disabled.bind не запускается вообще.
Если я удалю checked.bind из коробки, disabled.bind работает отлично.

Также обновляются обновленные значения до selectedRatesиногда после отправки и элементы потеряли фокус.
Я знаю, что наблюдение массива официально не поддерживается as mentioned here, что-то, что я заметил, стоит упомянуть.

Вопросы

1. Есть ли способ, чтобы получить checked.bind работать вместе с ref & disabled.bind?
   • Example with checked.bind
   • Example without checked.bind
2. Любая идея, почему я вижу этот массив наблюдаемых поведение как иногда?

Update

Я нашел "наблюдаемые значения" вопрос появляться периодически в поджигатель при входе в selectedRates.
При отображении его в html изменения значений всегда обновляются, причем использование как @ Fabio использования BindingEngine, так и моего checked.bind. Chrome всегда отображает и регистрирует правильные значения.
Понятия не имею, почему, или если я должен быть обеспокоен этим.

Answer 1

Это самое простое решение, которое я смог найти. Там могут быть более простые способы.

HTML

<template> 
    <div repeat.for="item of rates"> 
    <input type="checkbox" ref="item.check" model.bind="item" change.delegate="updateSelectedRates(item)"> 
    <input type="text" disabled.bind="item.check.checked" value.bind="item.value"> 
    </div> 

    <br> 
    <template repeat.for="rate of selectedRates">${rate.value}</template> 
</template> 

JS

export class App { 

    rates = [ { value: 1 }, {value: 2} ]; 
    selectedRates = []; 

    updateSelectedRates(rate) { 
    if (rate.check.checked) { 
     this.selectedRates.push(rate); 
    } else { 
     let index = this.selectedRates.map(rate => rate.value).indexOf(rate.value); 
     if (index !== -1) { 
     this.selectedRates.splice(index, 1); 
     } 
    } 
    } 

} 

Запуск пример https://gist.run/?id=0c2911d065e9725f6f86f45a2422b009

Answer 2

Посмотреть документы

http://aurelia.io/hub.html#/doc/article/aurelia/binding/latest/binding-checkboxes/1

<input type="checkbox" model.bind="product.id" checked.bind="selectedProductIds">