Kendo-knockoutjs integration
Kendo-knockoutjs integration
本文关键字:integration Kendo-knockoutjs 更新时间:2023-09-26
我正在为即将推出的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);
这个代码运行得很好,我可以在我的剑道网格中显示数据。
但我想做的是使用KnockoutJS ViewModel将数据绑定到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
所以,简单地说,我想要的是将KnockoutJS模型绑定到KendoUI网格,而不使用KendoUI的MVVM绑定。
我在这里找到了一个kendoUI集成的敲门砖,但它不适用于我的网格。欢迎任何意见。
提前谢谢。
派对有点晚了,但我用你的数据玩了一把小提琴
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 }">
相关文章:
- "Ken Burns效应”;悬停背景图像
- Kendo-knockoutjs integration
- PHP - Javascript integration?
- PHP and Jquery integration
- Meteor - Ckeditor Integration
- Pusher Integration
- Integration Virtualscroll.js
- Integration PHP + Javascript
- Node JS with C++ integration
- HTML5 and facebook integration
- Shopify + Mixpanel Integration
- Angular.js integration with Ruby On Rails Forms
- WebRTC and WebAudio Integration
- Integration with LAMP
- Jquery spritespin integration with angular js
- Angular JS and Oauth 2.0 Integration
- jquery.js / whmcs integration
- AngularJS and Webpack Integration
- Parse.com and Paypal integration
- ZK + RapidSpell Checker Integration?