0
我有一組Checkboxes和一個Select All複選框,使用Knockout按以下方式實現。我需要在頁面加載時默認選中「全選」複選框。使用Knockout檢查「Select all」複選框onload
$(document).ready(function(){
viewModel=new model(ko,$);
ko.applyBindings(viewModel);
});
function model(ko,$){
var jsonResponse= $.parseJSON(response);
this.factors=ko.observableArray(jsonResponse["factors"]);
this.selectedFactors=ko.observableArray();
this.selectAll = ko.dependentObservable({
read: function() {
return this.selectedFactors().length === this.factors().length;
},
write: function(newValue) {
this.selectedFactors(this.selectedFactors().length === this.factors().length ? [] : this.factors().slice(0));
},
owner: this
});
}
HTML:
<table>
<tr>
<td><input type="checkbox" id="selectAll" data-bind="checked: selectAll" />Select All</td>
</tr>
</table>
<table data-bind="foreach: factorsSplitJsonArray">
<tr data-bind="foreach: $data">
<td>
<!-- ko if: $data.hasOwnProperty("factorCode") -->
<input type="checkbox" class="jqFactors" id="jqFactors" data-bind="checkedValue: $data, checked: $root.selectedFactors" />
<span data-bind="text: factorDescription"></span>
<!-- /ko -->
</td>
</tr>
</table>
當我選擇或不選擇任何複選框或全選複選框selectedFactors得到改變的observableArray即。現在我需要在頁面加載時默認選擇「全選」複選框,而selectedFactors也應該包含所有選中的因素。
我是Knockout的新手,無法找到如何使用Knockout實現此功能。如果我們以某種方式顯式調用函數selectAll,它會完成這項工作嗎?我如何調用一個ko.dependentObservable函數。有人可以幫幫我嗎。
感謝您的幫助,但我還沒有能夠真正理解這一點並實施。它是否保持頁面加載時選中「全選」複選框? – Arunabh
是否在頁面加載時選擇「全選」可能取決於正在加載的任何數據,假設您的頁面可以保留一些狀態服務器端。如果用戶以前選擇了所有內容,則「jsonData.selectedFactors」將包含所有代碼,並且「全選」框也將被選中。 – Jeroen
我從您的評論中瞭解到,將所有來自JSON的因素分配給「selectedFactors」,以便在頁面加載時檢查「全選」。我已經嘗試了它,它確實檢查「全選」和所有其他因素,但它的行爲並不完全正確。如果我取消選中一個複選框,它仍然保持Select All理想狀態,它應該取消勾選「全選」,然後再次單擊它應選擇較早未選中的一個。 – Arunabh