Knockout選擇/取消選擇全部並獲取選定的行值

Question

我想創建一個選擇/取消選擇全部使用取消選擇並獲取選定要保存的行的值。

我能夠得到全部選擇並取消選擇所有工作，但不知道如何獲取所選行的數據。

此外，如果每行選中一行復選框複選框被選中或未選中。如果我取消選擇一個複選框，我希望全選複選框未被選中。

我創造了什麼，我迄今所做http://jsfiddle.net/adriandcosta/ewprL5bd/4/

這是我的代碼小提琴：

<div style="height:40px">Results</div> 
<div id="results" style="display:none" data-bind="visible: showResults"> 
    <table width="100%" id="tblSearchResults" data-bind="visible: SearchResults().length>0"> 
     <thead> 
      <tr> 
       <th align="left">Name</th> 
       <th>Gender</th> 
       <th align="left">DOB</th> 
       <th align="left">Join Date</th> 
       <th style="width:26px"> 
        <input type="checkbox" data-bind="checked: allSelected" /> 
       </th> 
      </tr> 
     </thead> 
     <tbody id="EmpResults" data-bind="template: { name:'TmplSearchResults', foreach: SearchResults }"></tbody> 
    </table> 
</div> 

模板

<script type="text/html" id="TmplSearchResults"> 
    <tr style = "border-bottom: 1px solid #CCC;"> 
     <td valign = "middle" data-bind="text: name"> </td> 
     <td valign="middle" align="center" data-bind="text: gender"></td > 
     <td valign = "middle" data-bind = "text: dob" ></td> 
    <td valign="middle" data-bind="text: joindate"></td > 
     <td valign = "middle" > 
      <input type = "checkbox" data-bind = "checked:$parent.isSelected" > 
       </td> 
    </tr> 
</script> 

查看模型和數據

var vmSearchResult; 
var vmSearchResultsModel = function() { 
    var self = this; 
    self.showResults = ko.observable(false); 
    self.SearchResults = ko.observableArray([]); 
    self.isSelected = ko.observable(false); // check box 
    self.allSelected = ko.observable(false); // all select checkbox 

    self.allSelected.subscribe(function (newValue) { 

     ko.utils.arrayForEach(vmSearchResult.SearchResults(), function (PartnerSearch) { 
      vmSearchResult.isSelected(newValue); //<== here I get the selected values need the whole row 

     }); 
    }); 
} 

    function ShowData() { 
    vmSearchResult.SearchResults(fakeData); 
     vmSearchResult.showResults(true); 

    } 

$(document).ready(function() { 
    vmSearchResult = new vmSearchResultsModel(); 
    ko.applyBindings(vmSearchResult, document.getElementById("results")); 
    ShowData(); 
}); 
//Fake data 
var fakeData = [{ 
    "name": "Adrian D'Costa", 
     "dob": "25-10-1984", 
     "gender": "M", 
     "joindate": "30-12-2004" 
}, { 

    "name": "Janet D'Curz", 
     "dob": "30-08-1992", 
     "gender": "F", 
     "joindate": "15-12-2005" 
}]; 

Answer 1

您會想要使用Writable computed observable作爲allSelected屬性而不是普通的可觀察值。

當寫入計算的觀察值時，您可以管理每一行的選定狀態。

例子：

self.allSelected = ko.computed({ 
    read: function() { 
     var firstUnchecked = ko.utils.arrayFirst(self.searchResults(), function (item) { 
      return item.isSelected() == false; 
     }); 
     return firstUnchecked == null; 
    }, 
    write: function (value) { 
     ko.utils.arrayForEach(self.searchResults(), function (item) { 
      item.isSelected(value); 
     }); 
    } 
}).extend({ rateLimit: 1 }); 

通過這種方法，你將不再需要訂閱的allSelected變化。

需要使用rateLimit擴展器來避免在項目列表增長到任何顯着大小時性能下降。 rateLimit擴展器是在KO 3.1中添加的，而您的小提琴則是參考2.3。我提供的小提琴使用3.2。這個方法假設你在每一行上都有一個isSelected的observable屬性。你的例子中沒有這個。在附帶的小提琴中，您可以看到我是如何添加的。

fiddle

性能小提琴：

• 1000 items with rateLimit
• 1000 items without rateLimit