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

最新推荐文章于 2021-07-05 14:19:41 发布

引路蜂

最新推荐文章于 2021-07-05 14:19:41 发布

阅读量7k

点赞数 4

分类专栏： Kendo 教程 Kendo 开发教程

本文链接：https://blog.youkuaiyun.com/mapdigit/article/details/9989801

版权

教程同时被 3 个专栏收录

666 篇文章

订阅专栏

Kendo

27 篇文章

订阅专栏

Kendo 开发教程

27 篇文章

订阅专栏

本文介绍如何使用KendoUI框架实现MVVM设计模式，包括创建ViewModel对象、定义数据绑定及事件处理方法，并展示了完整的示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

准备开始

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

 
    1var 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>

数据绑定

数据绑定将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>
 
    4var viewModel = kendo.observable({
 
    5    person: {
 
    6        name: "John Doe"
 
    7    }
 
    8});
 
    9kendo.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>
 
    4var viewModel = kendo.observable({
 
    5    person: {
 
    6        name: "John Doe",
 
    7        lowerCaseName: function() {
 
    8            return this.get("name").toLowerCase();
 
    9        }
 
    10    }
 
    11});
 
    12kendo.bind($("div"), viewModel);
 
    13</script>