如何調用取消選中和與Aurelia檢查功能

我有一個從API進來的項目列表，他們不會總是相同的，所以數組中的項目數量總是在變化。我正在爲每個項目創建一個複選框。如何調用取消選中和與Aurelia檢查功能

用戶有能力檢查/取消選中每個項目。這是我想做的事：

當一個項目被選中，這將是項目的ID推到一個數組
如果項目不加以控制，它會從數組中刪除該項目的ID

我只需要知道我是如何根據是否選中或不選中來調用它。我試過了一個「checked.delegate」和「checked.trigger」，我似乎無法讓它工作。

只是一個常規的click.delegate將無法正常工作，因爲我無法保持狀態是否是真或假，我不能爲所有變量設置變量，因爲我並不總是知道哪些項目將要來自API。有什麼建議麼？

來源

2016-07-07 James

嘗試change.delegate或change.trigger這樣的：

VM方法：

logchange(value) { 
    console.log(value); 
}

查看：你可以這樣做

<input type="checkbox" change.delegate="logchange($event.target.checked)" />

來源

2016-07-07 21:19:15

我不認爲這會工作，因爲我需要調用1方法時，它被選中，1方法時，它是未選中。我將如何訪問他們是否正在檢查或取消選中？ – James

其實這是有效的。太棒了，非常感謝！ – James

-1

一種方法是使用一個setter的幫助。比方說，你有這樣一個複選框：

<input type="checkbox">

在您的視圖模型創建一個私有字段，然後用一個getter和setter方法把它包裝：

get isChecked(){ 
    return this._isChecked; 
} 

set isChecked(value){ 
    this._isChecked = value; 
    //enter your extra logic here, no need for an event handler 
} 

private _isChecked: boolean;

然後綁定isChecked到視圖：

<input type="checkbox" checked.bind="isChecked">

每一個複選框被選中時還是未選中的塞特r會被調用，你可以在setter中調用你想要的任何方法。

另一種非常規的方式來實現這一目標是通過使用@bindable裝飾這樣的：

@bindable isChecked: boolean;

這是非常規的，因爲你可能不希望isChecked是綁定的，但是裝飾，您可以訪問到isCheckedChanged方法：

isCheckedChanged(newValue, oldValue){ 
    //Logic here 
}

當然還有就是change事件，你可以用趕上和change.delegate但已在另一個答案中提到

來源

2016-07-08 07:08:55 dimlucas

創建getters/setters像你這樣做是絕對是在Aurelia做到這一點的錯誤方式。使用getter/setter會導致Aurelia的綁定引擎切換到使用髒檢查。如果你在自己的Aurelia應用程序中這樣做，我懇請你停止這樣做。 –

但更重要的是，這個答案不適用於OP的具體問題。 OP在一箇中繼器內工作，因此將有任意數量的複選框可用。 –

如何調用取消選中和與Aurelia檢查功能

回答

相關問題