检查 Aurelia 上的所有选项，是否可以改进

Question

现在我们有下面的代码来填充"dirty" 借助 aurelia 绑定的力量：

HTML

<input class="order-input-root" type="checkbox" click.delegate="checkAll()" />

Javascript

    checkAll(){

    if($("input:checkbox.order-input-root").is(":checked"))
    {
        $("input:checkbox.order-input").removeAttr("checked");
        $("input:checkbox.order-input").click();
        return true;
    }else
    {
        $("input:checkbox.order-input").removeAttr("checked");
        return true;
    }

}

有什么方法可以改善这一点，aurelia 上有内置功能吗？我担心的是，如果我想在一个页面上有不同的列表，这段代码会变得一团糟

Answer 1

假设所有复选框都已正确绑定，您可以使用 change 事件轻松实现。

JS:

export class Welcome {
  constructor() {
    this.isAllChecked = false;
    this.items = [
      { display: 'test 1', 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>

这是一个例子http://plnkr.co/edit/AzU1dtOVgRpkVUHvupcZ?p=preview

如果由于某种原因 change 方法不够用，您可以使用 bindingEngine 来观察复选框。像这样：

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>

记得在不需要的时候拨打dispose()

这是一个工作示例http://plnkr.co/edit/uWjIEN8ep184af3w5Ay9?p=preview

这些是我找到的解决方案。如果我找到另一种方法，我会更新这个答案。

希望对您有所帮助！

检查 Aurelia 上的所有选项，是否可以改进

Check all option on Aurelia, can this be improved

javascript

aurelia