Kendo-knockoutjs 集成答案

【问题标题】：Kendo-knockoutjs integrationKendo-knockoutjs 集成
【发布时间】：2012-08-29 05:33:05
【问题描述】：

我正在为即将推出的 Web 应用程序开发 POC，我们必须进行大约 2 年的开发工作，现在我正在努力就 KendoUI MVVM 绑定和 KnockoutJS 绑定做出决定。

我使用两种技术开发了两个 POC，下面是示例代码。

Grid 的 KendoUI MVVM 绑定

<table id="kendoUiGridMvvmTest" height="600px" width="1153px">
<tr>
    <td>
        <h4>KendoUI Grid - Native MVVM Implementation</h4>
        <div data-role="grid"
            data-sortable="true" data-source='{"schema":{"model":{"fields":{"Name":{}, "Price":{"type":"number"}, "UnitsInStock":{"type":"number"}}}}}' data-filterable="true" data-editable="true" data-groupable="true" data-scrollable="true" data-selectable= "multiple cell"
    data-resizable="true"
    data-reorderable="true" data-pageable='{ "pageSize": 10 @*events: {change: onPage}*@}'
            data-columns='[{"field":"Name", "filterable":true}, {"field":"Price", "filterable":false}, "UnitsInStock", {"command": "destroy"}]'
            data-bind="source: gridSource"></div>
    </td>
</tr>

这是 ViewModel 代码。

var viewModel = kendo.observable({
    gridSource: [
        { Name: "Item1", Price: 18.00, UnitsInStock: 39 },
        { Name: "Item2", Price: 19.00, UnitsInStock: 17 },
        { Name: "Item3", Price: 18.00, UnitsInStock: 39 },
        { Name: "Item4", Price: 19.00, UnitsInStock: 17 },
        { Name: "Item5", Price: 18.00, UnitsInStock: 39 },
        { Name: "Item6", Price: 19.00, UnitsInStock: 17 },
        { Name: "Item7", Price: 18.00, UnitsInStock: 39 },
        { Name: "Item8", Price: 19.00, UnitsInStock: 17 },
        { Name: "Item9", Price: 18.00, UnitsInStock: 39 },
        { Name: "Item10", Price: 19.00, UnitsInStock: 17 },
        { Name: "Item11", Price: 18.00, UnitsInStock: 39 },
        { Name: "Item12", Price: 19.00, UnitsInStock: 17 },
        { Name: "Item13", Price: 18.00, UnitsInStock: 39 },
        { Name: "Item14", Price: 19.00, UnitsInStock: 17 },
        { Name: "Item15", Price: 18.00, UnitsInStock: 39 },
        { Name: "Item16", Price: 19.00, UnitsInStock: 17 },
        { Name: "Item17", Price: 97.00, UnitsInStock: 29 },
        { Name: "Item18", Price: 97.00, UnitsInStock: 29 },
        { Name: "Item19", Price: 97.00, UnitsInStock: 29 },
        { Name: "Item20", Price: 97.00, UnitsInStock: 29 }
    ],


});


kendo.ui.Grid.fn.options.filterable = false;
kendo.bind($("#kendoUiGridMvvmTest"), viewModel);

这段代码完美运行，我可以在我的剑道网格中显示数据。

但我想做的是使用 KnockoutJS ViewModel 将数据绑定到 Kendo Grid。所以我想要这样的代码。

var viewModel = {
    gridSource: [
        { Name: "Item1", Price: 18.00, UnitsInStock: 39 },
        { Name: "Item2", Price: 19.00, UnitsInStock: 17 },
        { Name: "Item3", Price: 18.00, UnitsInStock: 39 },
        { Name: "Item4", Price: 19.00, UnitsInStock: 17 },
        { Name: "Item5", Price: 18.00, UnitsInStock: 39 },
        { Name: "Item6", Price: 19.00, UnitsInStock: 17 },
        { Name: "Item7", Price: 18.00, UnitsInStock: 39 },
        { Name: "Item8", Price: 19.00, UnitsInStock: 17 },
        { Name: "Item9", Price: 18.00, UnitsInStock: 39 },
        { Name: "Item10", Price: 19.00, UnitsInStock: 17 },
        { Name: "Item11", Price: 18.00, UnitsInStock: 39 },
        { Name: "Item12", Price: 19.00, UnitsInStock: 17 },
        { Name: "Item13", Price: 18.00, UnitsInStock: 39 },
        { Name: "Item14", Price: 19.00, UnitsInStock: 17 },
        { Name: "Item15", Price: 18.00, UnitsInStock: 39 },
        { Name: "Item16", Price: 19.00, UnitsInStock: 17 },
        { Name: "Item17", Price: 97.00, UnitsInStock: 29 },
        { Name: "Item18", Price: 97.00, UnitsInStock: 29 },
        { Name: "Item19", Price: 97.00, UnitsInStock: 29 },
        { Name: "Item20", Price: 97.00, UnitsInStock: 29 }
    ],


};

ko.applyBindings(viewModel);

在这里你可以看到我使用了ko.applyBindings 而不是kendo.bind

所以，简单来说，我想要将 KnockoutJS 模型绑定到 KendoUI Grid，而不使用 KendoUI 的 MVVM 绑定。

我发现 kendoUI 集成 here 的淘汰赛，但它不适用于我的网格。欢迎任何cmets。

提前致谢。

【问题讨论】：

查看这些 Kendo UI 的 KO 绑定：rniemeyer.github.com/knockout-kendo
@RPNiemeyer 先生，我已经使用了您的淘汰赛剑道库。我已经使用 knockout-kendo.js 为应用程序完成了 POC。实际上，我们主要关心的是我们会在 Knockout-Kendo.js 库上获得的支持。因此，Knockout-kendo.js 库的未来版本如何？它会在 KendoUI 提供新的 UI Widgets 时提供未来的支持吗？谢谢先生。
该库的编写方式很容易添加与以前的小部件遵循相同模式的新小部件，因此添加新小部件并不难。就支持和增强而言，它是一个开源项目，因此人们可以提交拉取请求，我会尽力提供支持。话虽如此，显然剑道人在剑道 UI 上工作是有报酬的，所以他们可能有更多的时间投入到它上面。虽然它可以双向发挥作用，但他们可能会优先考虑一些低级的事情并计划在明年实现它，而对于开源项目，它可能会在今天（或不会）发生。
Kendo 人选择了从头开始构建自己的小部件以及自己的 MVVM 和绑定库的路径。我喜欢他们的小部件，但我不会打赌将资源用于构建与其他库的集成。如果您想使用 Kendo 和 KO，最好的办法是使用 Ryan 的库，并在出现新的小部件时为其做出贡献。
我在一个真实的项目中使用了 Ryan 的库。适用于大多数的东西，但我很快遇到了它不能很好地支持的绑定场景（一个例子是网格上的选定行），所以你必须为它开发自己的模组。与 kendo 控件结合使用时，我还遇到了一些性能和内存泄漏问题。

标签： javascript knockout.js kendo-ui

【解决方案1】：

聚会有点晚了，但这是我用你的数据玩过的小提琴

http://jsfiddle.net/Q4hGe/2/

数据绑定现在看起来像这样

data-bind="kendoGrid: { data: gridSource, columns: [{'field':'Name', 'filterable':true}, {'field':'Price', 'filterable':false}, 'UnitsInStock', {'command': 'destroy'}], scrollable: false, sortable: true, pageable: false }">

【讨论】：