チェックオーレリア上のすべてのオプションが、これは今

Question

を改善することができる、我々持っアウレリアバインディングの力で 「汚い」のようなものを埋め、次のコード：

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の機能は何ですか？私の懸念は、1つのページに異なるリストを作成したい場合、このコードは混乱してしまうことです。

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> 

ここchange方法は十分ではありません何らかの理由場合は、たとえばhttp://plnkr.co/edit/AzU1dtOVgRpkVUHvupcZ?p=preview

可能性がありますthを使用するe 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

これらは私が見つけたソリューションです。別の方法が見つかった場合は、この回答を更新します。

希望すると便利です。