MVVM模式概述

模型视图视图模型(MVVM)是一种设计模式，它帮助开发人员将模型(即数据)与视图(即用户界面)分离开来。

MVVM的视图-模型部分负责从模型中公开数据对象，以使这些对象易于在视图中使用。的剑道UI MVVM组件是MVVM模式的一个实现，它与剑道UI框架的其余部分——剑道UI小部件和剑道UI数据源无缝集成。

剑道UI MVVM初始化不是为了与剑道UI服务器包装器结合而设计的。使用包装器相当于jQuery插件语法初始化．如果希望通过MVVM模式创建Kendo UI小部件实例，则不要为这些实例使用服务器包装器。

开始

1. 首先创建一个视图模型对象。视图模型是将显示在视图中的数据(模型)的表示。要声明视图模型，请使用kendo.observable函数，并传递给它一个JavaScript对象。

   var viewModel =剑道。observable({name: "John Doe"， displayGreeting: function() {var name = this.get("name");alert("Hello， " + name + "!! ");}});

2. 声明一个视图。View是一个UI，即一组HTML元素，这些元素将被绑定到View- model上。在下面的示例中，输入值(其文本)通过数据绑定属性于名字字段。当这个字段改变时，输入值被更新以反映该更改。反之亦然:当输入更改时，字段更新。的点击事件的发生按钮是通过数据绑定属性于displayGreeting方法。控件时将调用该方法按钮．

     显示问候 

3. 将视图绑定到视图模型。这是通过调用kendo.bind方法:

设置数据-*选项

有关设置Kendo UI MVVM小部件的配置选项的命名约定的更多信息，请检查集数据选项．

Kendo UI中的混合小部件和框架不包括在初始化名称空间的默认列表中。可以通过运行显式初始化它们kendo.bind(element, viewModel, kendo.mobile.ui);．

下面的示例演示如何设置数据- *选项。

kendo.bind($(" #视图”),视图模型);

绑定

绑定将DOM元素(或小部件)属性与视图模型的字段或方法配对。类指定绑定数据绑定属性。: ,如。价值:名字．在前面的例子中使用了两个绑定:价值和点击．

剑道UI MVVM也支持绑定到其他属性:源，超文本标记语言，attr，可见，启用等。的数据绑定可以包含一个以逗号分隔的绑定列表。data-bind="value: name, visible: isnamevvisible "．有关每个剑道UI MVVM绑定的更多信息，请参阅MVVM绑定文章．

• 类的属性的引用，而不能包含硬编码的值视图模型．例如，Data-bind ="visible: false, source: [{foo: 'bar'}]"配置错误。
• 的数据模板属性不能包含内联模板定义，只能包含的ID外部模板．

Kendo UI MVVM还支持到嵌套视图模型字段的数据绑定。