Kontrol Aurelia tüm seçenek, bu Şu anda

Question

geliştirilebilir elimizdeki aurelia bağlamaları gücüyle "kirli" bir tür doldurur aşağıdaki kod:

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

} 

bu iyileştirmek için herhangi bir yolu herhangi buil orada, olduğu mı aurelia üzerinde t-işlevi ?, benim endişe tek bir sayfada farklı listelere sahip olmak istiyorsanız bu kod bir karışıklık olacak

Answer 1

Tüm onay kutularının düzgün bir şekilde bağlı olduğunu varsayarak, bunu kullanarak kolayca elde edebilirsiniz change etkinliği.

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: nedense change yöntem yeterli, yapabilirsin değilse

İşte

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

bir örnek http://plnkr.co/edit/AzU1dtOVgRpkVUHvupcZ?p=preview

olduğunu th kullan Onay kutusunu gözlemlemek için e bindingEngine. Şunun gibi:

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> 

artık ihtiyacınız olduğunda dispose() aramayı unutmayın. İşte

Bunlar bulduk çözümleridir bir çalışma örneği http://plnkr.co/edit/uWjIEN8ep184af3w5Ay9?p=preview

olduğunu. Başka bir yaklaşım bulursam bu cevabı güncellerim.

Bu yardımcı olur umarız!