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

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"等。

在混合应用程序中初始化

您可以从混合应用程序和给定元素中的数据属性初始化窗口小部件，然后还可以配置data- *选项。默认情况下为避免歧义，kendo.bind仅初始化kendo.ui命名空间中的小部件，不包括混合小部件。可以通过将其他名称空间作为参数传递来更改此操作。请注意混合Kendo UI应用程序首先从kendo.mobile.ui命名空间初始化小部件。这意味着具有data-role =“listview”的元素将自动初始化为混合应用程序上下文中的混合ListView小部件。

注意：data-role属性还接受完整窗口小部件类名称（带有其名称空间）作为值。

以下示例演示如何使用窗口小部件的完整类路径在混合应用程序中实例化Kendo UI ListView。

<div data-role="view">
<!-- specify the Kendo UI Web ListView widget -->
<div data-role="kendo.ui.ListView"></div>
</div>
<script>
var app = new kendo.mobile.Application();
</script>

在特定元素中初始化

以下示例演示如何在特定元素中实例化Kendo UI小部件。

<div id="container">
<input data-role="numerictextbox" />
<button data-role="button">Mobile button</button>
</div>
<script>
kendo.bind($("#container"), {}, kendo.ui, kendo.mobile.ui);
</script>

设置数据选项

可以使用target元素的data属性设置每个配置选项。将“data-”前缀添加到配置选项的名称并指定选项值 - 例如，data-delay =“100”。

注意：camelCase选项通过破折号分隔的属性设置。例如，AutoComplete的ignoreCase选项通过data-ignore-case设置。

以数据开头的选项不需要属性名称中的附加“数据”。例如，dataTextField选项通过data-text-field属性设置，dataSource通过data-source属性设置。复杂配置选项设置为JavaScript对象文字 - 例如，data-source =“{data：[{name：'John Doe'}，{name：'Jane Doe'}]}”。

以下示例演示如何使用数据属性配置Kendo UI小部件。

<div id="container"><input data-role="autocomplete"data-ignore-case="true"data-text-field="name"data-source="{data: [{name: 'John Doe'},{name: 'Jane Doe'}]}" /></div>
<script>
  kendo.bind($("#container"), {});
  </script>

订阅事件

您可以使用数据属性订阅Kendo UI小部件事件。 data属性的值被解析为JavaScript函数，可在全局范围内使用。以下示例演示如何通过数据属性订阅Kendo UI窗口小部件事件。

<div id="container"><input data-role="numerictextbox" data-change="numerictextbox_change" /></div>
<script>
  function numerictextbox_change(e) {
  // Handle the "change" event.
  }
  kendo.bind($("#container"));
  </script>