knockout.js表格過濾器不更新

Question

我一直在努力爭取看起來應該是一個非常簡單的Knockout.js任務幾個小時，並閱讀了多個網站和問題後，我是仍然難倒！

這裏是小提琴： http://jsfiddle.net/PL8UW/

基本上我有一個表綁定到淘汰賽視圖模型一個「狀態」欄。

我也有一個觀察的對象，應該讓你在各種狀態

過濾如果我的表直接將數據綁定對象的一切節目，但如果我綁定到計算機，然後什麼也不顯示。

HTML：

<form> 
    <input id="foo" type="checkbox" checked /> Foo 
    <input id="bar" type="checkbox" checked /> Bar 
</form> 
<div id="tableDiv"> 
    <table> 
     <thead> 
      <tr> 
       <th>Id</th> 
       <th>Status</th> 
      </tr> 
     </thead> 
     <tbody data-bind="foreach: filteredData"> 
      <tr> 
       <td><span data-bind="html: id"></span></td> 
       <td><span data-bind="html: status"></span></td> 
      </tr> 
     </tbody> 
    </table> 
</div> 

的javascript： VAR數據= [ { 「ID」：1， 「狀態」： 「foo」 的}， { 「ID」：2 「狀態」：「 「狀態」：「foo」}， {「id」：5，「status」：「foo」}， 「酒吧」}];

var viewModel = { 
    tableData: ko.observableArray(data), 
    filter: ko.observable({'foo': ko.observable(true), 'bar': ko.observable(true)}), 
    filteredData: ko.computed(function() { 
     return ko.utils.arrayFilter(viewModel.tableData, function(item) { 
      return viewModel.filter[item.Status]; 
     }); 
    })  
}; 

ko.applyBindings(viewModel, document.getElementById('tableDiv')); 

$('input[type=checkbox]').click(function() { 
    viewModel.filter[this.id] = this.checked; 
}); 

Answer 1

您的提琴許多較小的，更大的誤差，這是由兩個基本問題來了（事實旁邊，你設計你的存儲濾波和有點複雜，您與Kncokout的ViewModels混合jQuery的事件處理程序）：

• ko.observable返回一個函數，以便得到它的價值，你需要寫someObservable()並設置其價值，你需要寫someObservable(newValue)（documentation）

• 如果您使用在對象文字上聲明的ko.computed來訪問計算的對象本身，則需要使用deferEvaluation: true選項。 （參見：Difference between knockout View Models declared as object literals vs functions）

因此，這裏是你的代碼的固定版本註釋：

var viewModel = { 
    tableData: ko.observableArray(data), 
    filter: ko.observable({'foo': ko.observable(true), 'bar': ko.observable(true)}), 
    filteredData: ko.computed(function() { 
     // missing() after viewModel.tableData 
     return ko.utils.arrayFilter(viewModel.tableData(), function(item) { 
      //missing() after filter and at the end 
      //typo: Satus should be status 
      return viewModel.filter()[item.status](); 
     }); 
     //deferEvaluation was needed to refernce viewModel inside the computed 
    }, null, {deferEvaluation: true}) 
}; 

ko.applyBindings(viewModel, document.getElementById('tableDiv')); 

$('input[type=checkbox]').click(function() { 
    //missing() after filter missing() to set the observable value 
    viewModel.filter()[this.id](this.checked); 
}); 

演示JSFiddle。

下面是使用checked binding用於處理過濾器不同的解決辦法：

JSFiddle演示。