2

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

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

网格的 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);

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

但我想做的是使用 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 集成的淘汰赛，但它不适用于我的网格。欢迎任何意见。

提前致谢。

4

1 回答 1

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 }">
于 2013-03-08T01:36:59.310 回答