Check All Option On Aurelia, Can This Be Improved

Right now we have the following code which fills kind of 'dirty' with the power of aurelia bindings: HTML , checked: false }, { display: 'test 2', checked: false }, { display: 'test 3', checked: false }, { display: 'test 4', checked: false }, ]; } checkAll() { this.items.forEach(i => i.checked = this.isAllChecked); } }

HTML:

<template>
  <label>
    <input type="checkbox" value="true" checked.bind="isAllChecked" change.delegate="checkAll()" />
    Check All
  </label>
  <label repeat.for="item of items" style="display: block">
    <input type="checkbox" value="true" checked.bind="item.checked" />
    ${item.display}
  </label>
</template>

Here is an example http://plnkr.co/edit/AzU1dtOVgRpkVUHvupcZ?p=preview

If for some reason the change method is not enough, you could use the bindingEngine to observe the checkbox. Like this:

JS:

import {BindingEngine} from 'aurelia-binding'; //or aurelia-framework
import {inject} from 'aurelia-dependency-injection'; //or aurelia-framework

@inject(BindingEngine)
export class Welcome {
  constructor(bindingEngine) {
    this.bindingEngine = bindingEngine;
    this.checkAll = false;
    this.items = [
      { display: 'test 1', checked: false },
      { display: 'test 2', checked: false },
      { display: 'test 3', checked: false },
      { display: 'test 4', checked: false },
    ];
    this.checkAllSubscriber = this.bindingEngine.propertyObserver(this, 'checkAll')
      .subscribe((newValue, oldValue) => {
        this.items.forEach(i => i.checked = newValue);
      });
  }

  detached() {
    this.checkAllSubscriber.dispose();
  }
}

HTML:

<template>
  <label>
    <input type="checkbox" value="true" checked.bind="checkAll" />
    Check All
  </label>
  <label repeat.for="item of items" style="display: block">
    <input type="checkbox" value="true" checked.bind="item.checked" />
    ${item.display}
  </label>
</template>

Remember to call dispose() when you no longer need it.

Here is a working example http://plnkr.co/edit/uWjIEN8ep184af3w5Ay9?p=preview

These are the solutions I have found. I will update this answer if I find another approach.

Hope this helps!