knockout.js 表过滤器不更新

Question

几个小时以来，我一直在与看起来应该是一个非常简单的 Knockout.js 任务作斗争，在阅读了多个关于 SO 的网站和问题之后，我仍然感到困惑！

这是小提琴： 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: 变量数据 = [ {“id”：1，“状态”：“foo”}， {“id”：2，“状态”：“栏”}， {“id”：3，“状态”：“foo”}， {“id”：4，“状态”：“foo”}， {"id": 5, "status": "bar"}];

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

您的小提琴中有许多更小、更大的错误，这些错误来自两个基本问题（除了您的设计存储过滤器和有点复杂并且您将 jQuery 事件处理程序与 Kncokout 视图模型混合）：

• ko.observable 正在返回一个函数，因此要获取其值，您需要编写 someObservable() 并设置其值，您需要编写 someObservable(newValue) (documentation)

• 如果您使用在对象字面量上声明的ko.computed，则需要使用deferEvaluation: true 选项才能访问计算对象本身。 （另见：Difference between knockout View Models declared as object literals vs functions）

所以这是你的代码的固定版本与 cmets：

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.