Kendo UI开发教程 10 Kendo MVVM 一 概述

分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow

也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！

               

Model View ViewModel (MVVM)  是开发人员经常使用的一种设计模式，以实现数据模型（Model）和视图（View）的分离。MVVM中的ViewModel部分负责把模型中的数据对象以某种方便的形式和View结合起来（通常是通过数据绑定的方式）。

Kendo MVVM实现了MVVN设计模式，并且支持和Kendo框架的其它部分（如UI组件和数据源）的无缝连接。

准备开始

使用MVVM模式首先创建ViewModel对象，ViewModel对象代表了可以使用View显示的数据对象，Kendo框架中使用kendo.observable函数通过传入JavaScript对象的方法来定义一个ViewModel对象。比如：

1	var viewModel = kendo.observable({

2	name: "John Doe",

3	displayGreeting: function() {

4	var name = this.get("name");

5	alert("Hello, " + name + "!!!");

6

}

7

});

然后使用HTML创建一个View，这个View包含一个按钮和一个文本框。

1	<div id="view">

2	<input data-bind="value: name" />

3	<button data-bind="click: displayGreeting">Display Greeting</button>

4

</div>

其中文本框(input) 通过data-bind 属性指明绑定到ViewModel对象的 name域。 此时name域值发生变化将会反映到UI界面的Input输入框内容的变化。反之亦然，当UI输入框内容发生变化时，ViewModel的name域也发生变化。
按钮的click事件绑定到ViewModel的 displayGreeting 方法。

最后，通过bind方法将View和ViewModel绑定起来。

1	kendo.bind($("#view"), viewModel);

完整的代码如下：