Aurelia array binding with checkbox selection and element reference disable

Question

I'm trying to accomplish the following without the use of extra custom functions:

• Store selected items in a new array
• Only enable the textbox if its respective checkbox has been selected
• Keep track of updated values in new array

Below is a simplified sample of my code:

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

Currently, with the above, only the checked.bind is working. Selected items are stored in my new selectedRates array.

However my disabled.bind is not being triggered at all.
If I remove checked.bind from the checkbox, disabled.bind works perfectly.

Also the updated values appear to pull through to the selectedRates sometimes after submit and the elements have lost focus.
I'm aware that array observation is not officially supported as mentioned here, just something I noticed worth mentioning.

Questions

1. Is there a way to get checked.bind to work along with the ref & disabled.bind?
   • Example with checked.bind
   • Example without checked.bind
2. Any idea why I'm seeing this array observable-like behavior sometimes?

Update

I found the "observable values" issue to appear intermittently in firebug when logging the selectedRates.
When displaying it in html, the value changes are always updated, with both @Fabio's use of the BindingEngine implementation as well as my checked.bind. Chrome always displays and logs the correct values.
Still no idea why, or if I should be concerned about this.

Answer 1

See the docs

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

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

Answer 2

That's the simplest solution I could find. There might be easier ways.

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);
      }
    }
  }

}

Running example https://gist.run/?id=0c2911d065e9725f6f86f45a2422b009