用knockoutjs过滤剑道网格的合适方法是什么?

Question

使用knockout-kendo kendoGrid绑定过滤网格的合适方法是什么?

我目前正在通过将网格绑定到计算数组来过滤网格，使用如下所示的技术:KnockoutJS中的实用程序函数-参见"过滤数组"。

self.filteredItems = ko.dependentObservable(function() {
    var filter = self.filter().toLowerCase();
    if (!filter) {
        return self.items();
    } else {
        return ko.utils.arrayFilter(self.items(), function(item) {
             return item.name().toLowerCase().indexOf(filter) !== -1;
        });
    }
}, self);

这是有效的，但是如果你不在第1页，它不会重置网格到第1页，所以如果结果的"页面"少于你的搜索结果，网格将是空白的，直到第1页。

要查看问题，1. 请访问JSFIDDLE - http://jsfiddle.net/xW9yc/11/2. 翻到第3页3.在搜索中输入"P"

Answer 1

你可以在视图模型的可观察对象中存储对网格的引用，如下所示:

function ViewModel() {
    // ....
     self.grid = ko.observable();
}

和你的HTML将是

<div data-bind="kendoGrid: {data:filteredItems, pageable: { buttonCount: 5, pageSize: 5 }, widget: grid }" />

现在，一旦网格被实例化，你可以用self.grid()而不是$("#MyGrid").data("kendoGrid")来引用它——这是视图模型和视图之间的松散耦合，因为你不需要硬编码一个jQuery选择器。

我已经更新了你的小提琴以反映这些变化。

你可以在Knockout-Kendo文档的页面底部找到widget选项的文档

Answer 2

如果你不反对使用kendo javascript api，你可以这样做:

var grid = $("#MyGrid").data("kendoGrid");
            if(grid)
            {
            grid.dataSource.page(1);
            }

[edited jsfiddle] (http://jsfiddle.net/3CrMR/)

希望这是一些帮助!