javascript - Kendo-knockoutjs 集成

Question

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

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

网格的 KendoUI MVVM 绑定(bind)

<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);

此代码运行完美，我可以在我的 Kendo Grid 中显示数据。

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

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

所以，简单来说，我想要的是在不使用 KendoUI 的 MVVM 绑定(bind)的情况下将 KnockoutJS 模型绑定(bind)到 KendoUI Grid。

我找到了 kendoUI 集成的 knockout here ，但它不适用于我的网格。欢迎任何评论。

提前致谢。

Answer 1

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

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

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

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