Question

我一直在与看起来应该是一个非常简单的Knockout.js任务的斗争进行了数小时的斗争，在阅读了多个关于SO的网站和问题之后，我仍然难倒！

基本上我有一张表＆＃34;状态＆＃34;绑定到knockout viewmodel的列。

我还有一个可观察的对象，可以让你过滤各种状态

如果我将表直接绑定到数据对象，则显示所有内容，但如果我绑定到计算机，则无显示任何内容。

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 data = [ {＆＃34; id＆＃34;：1，＆＃34; status＆＃34;：＆＃34; foo＆＃34;}， {＆＃34; id＆＃34;：2，＆＃34; status＆＃34;：＆＃34; bar＆＃34;}， {＆＃34; id＆＃34;：3，＆＃34; status＆＃34;：＆＃34; foo＆＃34;}， {＆＃34; id＆＃34;：4，＆＃34; status＆＃34;：＆＃34; foo＆＃34;}， {＆＃34; id＆＃34;：5，＆＃34; status＆＃34;：＆＃34; bar＆＃34;}];

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）
如果您使用在对象文字上声明的deferEvaluation: true来访问计算中的对象本身，则需要使用ko.computed选项。（另见：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。

knockout.js表过滤器不更新

1 个答案: