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

在混合應用程序中初始化

您可以從混合應用程序和給定元素中的數據屬性初始化窗口小部件，然后還可以配置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>

掃描關注慧聚IT微信公眾號，及時獲取最新動態及最新資訊