使用 MVVM 模式首先创建 ViewModel 对象，ViewModel 对象代表了可以使用 View 显示的数据对象，Kendo 框架中使用 kendo.observable 函数通过传入 JavaScript 对象的方法来定义一个 ViewModel 对象。比如：
最后使用bind方法，将view和viewModel绑定起来。绑定完之后，输入框的值发送变化，对应viewModel的值也发生变化；viewModel的值发生了变化，输入框的值也会跟着变化。
kendo.bind($("#view"), viewModel);
<!doctype html>
<html>
<head>
<title>Kendo UI Web</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.2.514/js/kendo.all.min.js"></script>
</head>
<body>
<div id="view">
<input data-bind="value: name" /><br>
<span data-bind="text:text"></span><br>
<button data-bind="click: displayGreeting">Display Greeting</button><br>
<input data-bind="value:model.name" />
</div>
<script>
var viewModel = kendo.observable({
name: "John Doe",
text: "hello world",
displayGreeting: function () {
var name = this.get("name");
alert("Hello, " + name + "!!!");
}
});
kendo.bind($("#view"), viewModel);
viewModel.set('model.name','mike');
</script>
</body>
</html>
ObservableObject 对象
Kendo MVVM 框架关键的一个部分为 ViewModel，它主要是通过 kendo.data.ObserableObject 来提供支持的。它可以监控改变（ UI 变化或是值的变化）并通知关心该变化的组件。 使用kendo.observable方法可以创建一个对象。
var viewModel = kendo.observable( {
model:{
},
save: function () {
}
});
可以使用viewModel.set(‘model’, 123)，来给viewModel赋值
同时也支持使用嵌套赋值，如：viewModel.set(‘model.name’, ‘mike’),前提是model这个对象必须定义过。
常用的绑定方法
下面列举一些常用的view和model直接绑定的方法，可以使用逗号分隔同时绑定
value
<input data-bind=”value:model.name” />
将viewModel.model.name绑定到input的value上
text
<span data-bind=”text:model.name”><span>
将viewModel.model.name绑定到span的text上
click
<button data-bind=”click: save”></button>
将viewModel.save()方法，绑定到button的单击事件中
其他的更多的绑定方法，可以登录https://www.w3cschool.cn/kendouidevelopmenttutorial/f1tu1jvu.html这个网站看。
Kendo.hap.js常用方法介绍
Kendo.hap.js是HAP框架对kendo封装的一些常用的js代码。使用IDEA用ctrl+shift+N，搜索kendo.hap.js便可以进入
Hap.autoResizeGrid(‘#gird’)
自适应gird表格高度，传入grid的id
Hap.getCodeMeaning(data,v)
根据快码和快码的value，获取快码的text，其中data是快码本身，例如“YES_NO”，而v是快码的某个value，例如“N”，返回结果就是“否”
Hap.strToDate(value)
将日期字符串转换为一个Date对象
Hap.formatDate(value)
将一个Date对象，格式化为“yyyy-MM-dd”的格式
Hap.formatDateTime(value)
将一个Date对象，格式化为“yyyy-MM-dd HH:mm:ss”的格式
Hap.blockUI(options)
提供一个遮罩层，用于在ajax请求时，用户重复点击的情况下使用
options:
* options.target 目标dom的id等标识
* options.message:提示信息内容
* options.textOnly 仅文字提示
* options.iconOnly 仅图标提示
* options.boxed 带边框的提示内容
* options.animate 提示动画
Hap.unblockUI(target)
和上面的搭配使用，可以在ajax请求接收后，释放遮罩层。
target 需要释放遮罩层的id，如“#div”
Hap.showToast(options)
一个右下角的小提示，可以在保存成功后给用户一个提示
options:
* options.type 类型
* options.message:提示信息内容
* options.title标题
Hap.createWindow(selector, options)
创建一个kendoWindow
selector：目标dom的id，如“#win”
options:
* options.width 窗口的宽度
* options.height 窗口的高度
* options.title 标题
* options.url 窗口指向的html路径
Hap.createGridViewModel(selector, extension)
为grid创建一个通用的viewModel对象，里面包含了表格的增删改查事件，导出Excel等。
selector: 目标dom的id，如“#grid”
extension: 一个拓展的js对象
Hap.lockBtn(options)
锁定一个按钮，防止重复提交
options
* options.target:需要禁止的按钮标识
* options.message:按钮显示的信息
Hap.unLockBtn(options)
解锁之前锁定的按钮
options
* options.target:需要禁止的按钮标识
* options.message:按钮恢复显示的信息
Kendo ui的几个消息弹框
提示弹框
kendo.ui.showInfoDialog({
title: ‘提示’,
message: ‘提示框’
})
报错弹框
kendo.ui.showErrorDialog({
title: ‘错误’,
message: ‘错误弹框’
})
警告弹框
kendo.ui.showWarningDialog({
title: ‘警告’,
message: ‘警告弹框’
})
确认弹框
kendo.ui.showConfirmDialog({
title: '提示',
message: '确定要删除这条消息吗'
}).done(function (e) {
if(e.button=='OK'){
// 点击了确认的回调事件
alert(‘删除成功’)
}
})