Kendo UI for jQuery使用教程：使用MVVM初始化（二）

【Kendo UI for jQuery最新试用版下载】

Kendo UI目前最新提供Kendo UI for jQuery、Kendo UI for Angular、Kendo UI Support for React和Kendo UI Support for Vue四个控件。Kendo UI for jQuery是创建现代Web应用程序的最完整UI库。

您可以通过数据属性或基于自定义HTML属性初始化和配置每个Kendo UI小部件。

Kendo UI混合应用程序、单页面应用程序（SPA）视图组件和模型视图视图模型（MVVM）kendo.bind方法使用声明性方法自动实例化现有DOM元素中的多个小部件。

使用数据属性

当页面上有许多Kendo UI小部件时，从数据属性初始化很方便，因为小部件配置是在目标元素中声明的。

以下示例演示如何使用数据属性初始化Kendo UI窗口小部件。 kendo.bind（$（“＃container”））语句查找具有角色数据属性的所有元素，并初始化相应的Kendo UI小部件。

注意：角色数据属性的值是窗口小部件的小写名称 - "autocomplete"、"dropdownlist"等。

设置事件处理程序

您还可以将事件处理程序设置为成员函数。例如，可以将事件数据属性设置为foo.bar，将其解析为全局范围中可用的foo对象的bar方法。

以下示例演示如何将成员函数用作事件处理程序。

<div id="container">

<input data-role="numerictextbox" data-change="handler.numerictextbox_change" />

</div>

<script>

var handler = {

numerictextbox_change: function (e) {

// Handle the "change" event

}

};

kendo.bind($("#container"));

</script>

设置数据源

数据绑定的Kendo UI小部件的数据源也可以通过数据属性进行设置。该值可以是JavaScript对象、数组或全局范围中可用的变量。

以下示例演示如何将Kendo UI窗口小部件的数据源设置为JavaScript对象。

<div id="container">

<input data-role="autocomplete" data-source="{data:['One', 'Two']}" />

</div>

<script>

kendo.bind($("#container"));

</script>

以下示例演示如何将Kendo UI窗口小部件的数据源设置为JavaScript数组。

<div id="container">

<input data-role="autocomplete" data-source="['One', 'Two']" />

</div>

<script>

kendo.bind($("#container"));

</script>

以下示例演示如何将Kendo UI窗口小部件的数据源设置为全局范围中可用的变量。

<div id="container">

<input data-role="autocomplete" data-source="dataSource" />

</div>

<script>

var dataSource = new kendo.data.DataSource( {

data: [ "One", "Two" ]

});

kendo.bind($("#container"));

</script>

使用模板

通过使用数据属性，您还可以设置模板配置。属性值被解析为具有模板内容的脚本元素的id属性。

以下示例演示如何设置Kendo UI窗口小部件的模板。

<div id="container"><input data-role="autocomplete"data-source="[{firstName:'John', lastName: 'Doe'}, {firstName:'Jane', lastName: 'Doe'}]"data-text-field="firstName"data-template="template" /></div>

<script id="template" type="text/x-kendo-template">

  <span>#: firstName # #: lastName #</span>

  </script>

<script>

  kendo.bind($("#container"));

  </script>

使用标记

您可以通过以下任何方式基于自定义HTML属性初始化窗口小部件：

View和移动应用程序根据角色HTML5数据属性实例化小部件，两者都在内部使用MVVM。
kendo.bind方法扫描传递的DOM元素内容来获取数据角色属性并实例化相应的小部件。
Kendo UI AngularJS指令支持基于自定义元素属性或自定义标记名称的声明性初始化。

虽然理论上可以通过jQuery插件语法从同一DOM元素初始化几个不同的Kendo UI小部件，但是标记的声明性初始化不支持它。

注意：

数据属性初始化不是为与Kendo UI服务器封装器组合而设计的。封装器的使用等同于jQuery插件语法初始化。要通过MVVM或AngularJS机制创建Kendo UI小部件实例，请不要对这些实例使用服务器封装器。
从HTML元素初始化Kendo UI小部件，这些元素是DOM树的一部分。从文档片段创建小部件可能会导致意外的副作用或导致JavaScript错误。

在SPA视图中初始化

以下示例引用模板中带有AutoComplete小部件的（SPA）视图。

<div id="container"></div><script id="index" type="text/x-kendo-template"><div>Hello <input data-role="autocomplete" data-source="['foo', 'bar', 'baz']" />!</div></script>

<script>

  var index = new kendo.View('index');

  index.render("#container");

  </script>

在MVVM中初始化

以下示例引用带有AutoComplete小部件的MVVM绑定DOM元素。

注意：数据绑定属性语法在窗口小部件选项（在本例中为数据源）和视图模型字段（源）之间建立双向绑定。

<div id="container"><div>Hello <input data-role="autocomplete" data-bind="source: source" />!</div></div>

<script>

  kendo.bind($("#container"), {

  source: ['foo', 'bar', 'baz']

  });

  </script>

在混合UI应用程序中初始化

以下示例引用具有View和AutoComplete小部件的Kendo UI混合应用程序。

<div data-role="view" data-model="foo"><div>An autocomplete widget<input data-role="autocomplete" data-source="['foo', 'bar', 'baz']" /></div>

<div>

  A widget bound to the mobile view ViewModel dataSource field

  <input data-role="autocomplete" data-bind="source: dataSource" />

  </div>

  </div>

<script>

  var foo = kendo.observable({

  dataSource: ['foo', 'bar', 'baz']

  });

new kendo.mobile.Application();

  </script>

Kendo UI R2 2019 SP1全新发布，最新动态请持续关注Telerik中文网！

扫描关注慧聚IT微信公众号，及时获取最新动态及最新资讯