用 knockoutjs 过滤剑道网格的适当方法是什么？答案

【问题标题】：What is the appropriate way to filter a kendo grid with knockoutjs?用 knockoutjs 过滤剑道网格的适当方法是什么？
【发布时间】：2014-05-08 18:25:52
【问题描述】：

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

我目前正在通过将网格绑定到计算数组来过滤网格，使用此处显示的技术：Utility Functions in 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”

【问题讨论】：

您希望网格在应用某些过滤器时从第 1 页开始，还是直接转到最后一个可用页面？

标签： knockout.js kendo-ui kendo-grid knockout-kendo

【解决方案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 选择器进行硬编码。

我已经updated your fiddle 反映了这些变化。

您可以在this page in the Knockout-Kendo documentation 底部找到widget 选项的文档

【讨论】：

这很好——我没有看到 self.grid 被设置在任何地方——这是怎么发生的？！我在“widget”标签上找不到任何文档
@user210757 self.grid 在视图模型中被声明为一个空的 observable，然后在 HTML 中添加 widget: grid 在 kendo 网格实例化时填充 observable。我使用grid 作为变量名——它可以是你想要的任何东西。我会在widget 参数上查找一些文档，如果我找到任何东西，我会在此处发布
@user210757 查看我对答案的编辑以获取文档链接

【解决方案2】：

如果您不反对使用 kendo javascript api，您可以执行以下操作：

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

[编辑过的 jsfiddle] (http://jsfiddle.net/3CrMR/)

希望对你有所帮助！

【讨论】：

我唯一反对的是ViewModel直接与View交互。 ViewModel 可能不应该知道#MyGrid。如果有一种方法可以严格地从视图中触发它，那会更好。感谢您的回复！
如果可以的话，我会接受这两个答案，因为这是我使用的两者的合作。这绝对是一个巨大的帮助，谢谢