kendo ui 实现MVVM
Posted baota
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了kendo ui 实现MVVM相关的知识，希望对你有一定的参考价值。
MVVM model----view model----model 实现页面和model之间的动态绑定
grid 支持 events source visible绑定
第一步建立一个observable对象 对象为参数
var viewModel = kendo.observable()
第二步实现视图与 viewModel绑定
kendo.bind($("#example"), viewModel); //jQuery对象
注意对某一属性设置值时使用
this.set("isDescriptionShown", true);
showDescription: function(e) {
e.stopPropagation();
e.preventDefault();
this.set("isDescriptionShown", true); //给属性赋值
}
<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="styles/kendo.common.min.css" /> <link rel="stylesheet" href="styles/kendo.default.min.css" /> <link rel="stylesheet" href="styles/kendo.default.mobile.min.css" /> <script src="js/jquery.min.js"></script> <script src="js/kendo.all.min.js"></script> </head> <body> <div id="example"> <div class="demo-section k-content wide"> <div> <h4>Add or update a record</h4> <div data-role="grid" data-editable="true" data-toolbar="[‘create‘, ‘save‘]" data-columns="[ { ‘field‘: ‘ProductName‘, ‘width‘: 270 }, { ‘field‘: ‘UnitPrice‘ }, ]" data-bind="source: products, //绑定的属性 visible: isVisible, //显示隐藏 events: { save: onSave }" style="height: 200px"></div> </div> <div style="padding-top: 1em;"> <h4>Console</h4> <div class="console"></div> </div> </div> <div class="box wide"> <div class="box-col"> <h4>Configuration</h4> <div> <label><input type="checkbox" data-bind="checked: isVisible">Visible</label> //绑定的属性 </div> </div> <div class="box-col"> <h4>Information</h4> Kendo UI Grid supports the <a href="http://docs.telerik.com/kendo-ui/getting-started/framework/mvvm/bindings/events">events</a>, <a href="http://docs.telerik.com/kendo-ui/getting-started/framework/mvvm/bindings/source">source</a> and <a href="http://docs.telerik.com/kendo-ui/getting-started/framework/mvvm/bindings/visible">visible</a> bindings. </div> </div> <script> var viewModel = kendo.observable({ //观察者 检测属性的变化 isVisible: true, onSave: function(e) { kendoConsole.log("event :: save(" + kendo.stringify(e.values, null, 4) + ")"); }, products: new kendo.data.DataSource({ schema: { //图表 model: { id: "ProductID", fields: { ProductName: { type: "string" }, UnitPrice: { type: "number" } } } }, batch: true, //批量的 transport: { read: { url: "https://demos.telerik.com/kendo-ui/service/products", dataType: "jsonp" }, update: { url: "https://demos.telerik.com/kendo-ui/service/products/update", dataType: "jsonp" }, create: { url: "https://demos.telerik.com/kendo-ui/service/products/create", dataType: "jsonp" }, parameterMap: function(options, operation) { if (operation !== "read" && options.models) { return {models: kendo.stringify(options.models)}; } } } }) }); kendo.bind($("#example"), viewModel); //实现 视图和 viewModel的绑定 </script> </div> </body> </html>
以上是关于kendo ui 实现MVVM的主要内容，如果未能解决你的问题，请参考以下文章