使用淘汰賽選擇所有複選框

Question

我想選擇所有使用淘汰賽的複選框。這裏是我的視圖模型

function MasterViewModel() { 
var self = this; 
self.People = ko.observableArray([new Person("Test1", false), new Person("Test2", false)]); 
self.selectedAllBox = ko.observable(false); 

self.selectedAllBox.subscribe(function (newValue) { 
    if (newValue == true) { 
     ko.utils.arrayForEach(self.People(), function (item) { 
      item.sel = true; 
     }); 
    } else { 
     ko.utils.arrayForEach(self.People(), function (item) { 
      item.sel = false; 

     }); 
    } 
}); 

} 
Person = function (name, sel) { 
this.Name = name; 
this.sel = sel; 
} 

ko.applyBindings(new MasterViewModel()); 

這是我的看法

<table> 
<thead> 
    <tr> 
     <th>Name</th> 
     <th> 
      <input type="checkbox" data-bind="checked: selectedAllBox" /> 
     </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: sel" /> 
     </td> 
    </tr> 
</tbody></table> 

我不能讓它檢查所有。這是我的Fiddle。你能告訴我我做錯了什麼嗎？

Answer 1

你需要讓內部Person的sel屬性觀察到：

Person = function (name, sel) { 
    this.Name = name; 
    this.sel = ko.observable(sel); 
} 

而且你需要設置觀察到的int selectedAllBox.subscribe：

self.selectedAllBox.subscribe(function (newValue) { 
    if (newValue == true) { 
     ko.utils.arrayForEach(self.People(), function (item) { 
      item.sel(true); 
     }); 
    } else { 
     ko.utils.arrayForEach(self.People(), function (item) { 
      item.sel(false); 

     }); 
    } 
}); 

演示JSFiddle。