CODEWITHSUNDEEP
javascriptaurelia
JvR
JvR

Reputation: 1248

Aurelia array binding with checkbox selection and element reference disable

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

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

Upvotes: 2

Views: 2391

Answers (2)

RouR
RouR

Reputation: 6336

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

Upvotes: 2

Fabio
Fabio

Reputation: 11990

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

Upvotes: 1

Related Questions