Kendo UI开发教程(10): Kendo MVVM (一) 概述

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);

完整的代码如下:

1 <!doctype html>
2 <html>
3 <head>
4     <title>Kendo UI Web</title>
5     <link href="styles/kendo.common.min.css" rel="stylesheet" />
6     <link href="styles/kendo.default.min.css" rel="stylesheet" />
7     <script src="js/jquery.min.js"></script>
8     <script src="js/kendo.web.min.js"></script>
9  
10 </head>
11 <body>
12 <div id="view">
13     <input data-bind="value: name" />
14     <button data-bind="click: displayGreeting">Display Greeting</button>
15 </div>
16  
17  <script>
18      var viewModel = kendo.observable({
19          name: "John Doe",
20          displayGreeting: function () {
21              var name = this.get("name");
22              alert("Hello, " + name + "!!!");
23          }
24      });
25  
26      kendo.bind($("#view"), viewModel);
27  </script>
28 </body>
29 </html>

Kendo UI开发教程(10): Kendo MVVM (一) 概述_第1张图片

 

 

数据绑定

数据绑定将DOM元素(或者UI组件)的属性绑定到ViewModel的某个属性或是方法。绑定通过设置data-bind属性,采用 “绑定名称 : ViewModel的属性或方法”的格式,也就是 value : name 的形式来指明。上面的例子使用了两种不同类型的绑定,value和click。 Kendo MVVM也支持其它类型的绑定,如source, html, attr ,visible,enable等。 data-bind 也可以支持通过逗号分隔的属性列表。Kendo MVVM数据绑定也支持嵌套的ViewModel 属性。

比如下例 把div绑定到person.name:

1 <div data-bind="text: person.name">
2 </div>
3 <script>
4 var viewModel = kendo.observable({
5     person: {
6         name: "John Doe"
7     }
8 });
9 kendo.bind($("div"), viewModel);
10 </script>

要注意的是data-bindings的值不是Javascript代码,不可以使用在data-bindings中使用javascript 方法,比如

1 <div data-bind="text: person.name.toLowerCase()"></div>

要实现上面使用小写的功能,可以使用下面的实现:

1 <div data-bind="text: person.lowerCaseName"></div>
2  
3 <script>
4 var viewModel = kendo.observable({
5     person: {
6         name: "John Doe",
7         lowerCaseName: function() {
8             return this.get("name").toLowerCase();
9         }
10     }
11 });
12 kendo.bind($("div"), viewModel);
13 </script>
 

你可能感兴趣的:(Kendo UI开发教程(10): Kendo MVVM (一) 概述)