knockoutjs在取消選中一個或多個項目時取消選擇/選中所有複選框

Question

這與本主題中的其他問題類似，但不同。

我有一個記錄列表，每個記錄都有一個select複選框。

在表頭中我有一個「全選」複選框。

當用戶選中/取消選中「全選」時，記錄被選中/取消選中。這工作正常。

但是，當一個或多個記錄被取消選擇時，我需要取消選擇我的「全選」複選框。

我的標記：

<table> 
    <thead> 
     <tr> 
      <th>Name</th> 
      <th><input type="checkbox" data-bind="checked: SelectAll" /></th> 
     </tr> 
    </thead> 
    <tbody data-bind="foreach: $data.People"> 
     <tr> 
      <td data-bind="text: Name"></td> 
      <td class="center"><input type="checkbox" data-bind="checked: Selected" /></td> 
     </tr> 
    </tbody> 
</table> 

我的腳本（編輯）：

function MasterViewModel() { 
    var self = this; 

    self.People = ko.observableArray(); 
    self.SelectAll = ko.observable(false); 

    self.SelectAll.subscribe(function (newValue) { 
     ko.utils.arrayForEach(self.People(), function (person) { 
      person.Selected(newValue); 
     }); 
    }); 
} 


my.Person = function (name, selected) { 
    var self = this; 

    self.Name = name; 
    self.Selected = ko.observable(false); 
} 

Answer 1

這工作

http://jsfiddle.net/AneL9/

self.SelectAll = ko.computed({ 
    read: function() { 
     var item = ko.utils.arrayFirst(self.People(), function(item) { 
      return !item.Selected(); 
     }); 
     return item == null;   
    }, 
    write: function(value) { 
     ko.utils.arrayForEach(self.People(), function (person) { 
      person.Selected(value); 
     }); 
    } 
}); 

，但會給你一個歐爾N^2 proble m如果選擇取消一切，你可以用計算來解決該

http://www.knockmeout.net/2011/04/pausing-notifications-in-knockoutjs.html

編輯pasuable：您還可以擴展計算與油門，這樣你可以避免歐爾N^2問題

.extend({ throttle: 1 }) 

http://jsfiddle.net/AneL9/44/

Answer 2

你應該讓SelectAll計算觀察到的是這樣的：

self.SelectAll = ko.computed({ 
    read: function() { 
     var persons = self.People(); 
     for (var i = 0, l = persons.length; i < l; i++) 
      if (!persons[i].Selected()) return false; 
     return true; 
    }, 
    write: function(value) { 
     ko.utils.arrayForEach(self.People(), function(person){ 
      person.Selected(value); 
     }); 
    } 
}); 

和strip SelectAll.subscribe out。

http://jsfiddle.net/Yqj59/