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