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>