Kendo MVVM (一) 概述

时间 2020-06-03

标签 kendo mvvm 概述繁體版

原文原文链接

Kendo MVVM (一) 概述

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

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

准备开始

使用 MVVM 模式首先建立 ViewModel 对象，ViewModel 对象表明了能够使用 View 显示的数据对象，Kendo 框架中使用 kendo.observable 函数经过传入 JavaScript 对象的方法来定义一个 ViewModel 对象。好比： html

var viewModel = kendo.observable({
    name: "John Doe",
    displayGreeting: function() {
        var name = this.get("name");
        alert("Hello, " + name + "!!!");
    }
});

而后使用 HTML 建立一个 View，这个 View 包含一个按钮和一个文本框。 java

<div id="view">
    <input data-bind="value: name" />
    <button data-bind="click: displayGreeting">Display Greeting</button>
</div>

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

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

kendo.bind($("#view"), viewModel); 完整的代码以下：设计模式

<!doctype html>
<html>
<head>
    <title>Kendo UI Web</title>
    <link href="styles/kendo.common.min.css" rel="stylesheet" />
    <link href="styles/kendo.default.min.css" rel="stylesheet" />
    <script src="https://7n.w3cschool.cn/attachments/image/wk/kendouidevelopmenttutorial/jquery.min.js"></script>
    <script src="https://7n.w3cschool.cn/attachments/image/wk/kendouidevelopmenttutorial/kendo.web.min.js"></script>

</head>
<body>
<div id="view">
    <input data-bind="value: name" />
    <button data-bind="click: displayGreeting">Display Greeting</button>
</div>

 <script>
     var viewModel = kendo.observable({
         name: "John Doe",
         displayGreeting: function () {
             var name = this.get("name");
             alert("Hello, " + name + "!!!");
         }
     });

     kendo.bind($("#view"), viewModel);
 </script>
</body>
</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: ide

<div data-bind="text: person.name">
</div>
<script>
var viewModel = kendo.observable({
    person: {
        name: "John Doe"
    }
});
kendo.bind($("div"), viewModel);
</script>

要注意的是 data-bindings 的值不是 Javascript 代码，不能够使用在 data-bindings 中使用 javascript 方法，好比函数

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

要实现上面使用小写的功能，能够使用下面的实现：

<div data-bind="text: person.lowerCaseName"></div>
<script>
var viewModel = kendo.observable({
    person: {
        name: "John Doe",
        lowerCaseName: function() {
            return this.get("name").toLowerCase();
        }
    }
});
kendo.bind($("div"), viewModel);
</script>