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四個(gè)控件。Kendo UI for jQuery是創(chuàng)建現(xiàn)代Web應(yīng)用程序的最完整UI庫(kù)。

您可以通過(guò)數(shù)據(jù)屬性或基于自定義HTML屬性初始化和配置每個(gè)Kendo UI小部件。

Kendo UI混合應(yīng)用程序、單頁(yè)面應(yīng)用程序（SPA）視圖組件和模型視圖視圖模型（MVVM）kendo.bind方法使用聲明性方法自動(dòng)實(shí)例化現(xiàn)有DOM元素中的多個(gè)小部件。

使用數(shù)據(jù)屬性

當(dāng)頁(yè)面上有許多Kendo UI小部件時(shí)，從數(shù)據(jù)屬性初始化很方便，因?yàn)樾〔考渲檬窃谀繕?biāo)元素中聲明的。

以下示例演示如何使用數(shù)據(jù)屬性初始化Kendo UI窗口小部件。 kendo.bind（$（“＃container”））語(yǔ)句查找具有角色數(shù)據(jù)屬性的所有元素，并初始化相應(yīng)的Kendo UI小部件。

注意：角色數(shù)據(jù)屬性的值是窗口小部件的小寫名稱 - "autocomplete"、"dropdownlist"等。

在混合應(yīng)用程序中初始化

您可以從混合應(yīng)用程序和給定元素中的數(shù)據(jù)屬性初始化窗口小部件，然后還可以配置data- *選項(xiàng)。 默認(rèn)情況下為避免歧義，kendo.bind僅初始化kendo.ui命名空間中的小部件，不包括混合小部件。 可以通過(guò)將其他名稱空間作為參數(shù)傳遞來(lái)更改此操作。請(qǐng)注意混合Kendo UI應(yīng)用程序首先從kendo.mobile.ui命名空間初始化小部件。 這意味著具有data-role =“l(fā)istview”的元素將自動(dòng)初始化為混合應(yīng)用程序上下文中的混合ListView小部件。

注意：data-role屬性還接受完整窗口小部件類名稱（帶有其名稱空間）作為值。

以下示例演示如何使用窗口小部件的完整類路徑在混合應(yīng)用程序中實(shí)例化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>

在特定元素中初始化

以下示例演示如何在特定元素中實(shí)例化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>

設(shè)置數(shù)據(jù)選項(xiàng)

可以使用target元素的data屬性設(shè)置每個(gè)配置選項(xiàng)。 將“data-”前綴添加到配置選項(xiàng)的名稱并指定選項(xiàng)值 - 例如，data-delay =“100”。

注意：camelCase選項(xiàng)通過(guò)破折號(hào)分隔的屬性設(shè)置。 例如，AutoComplete的ignoreCase選項(xiàng)通過(guò)data-ignore-case設(shè)置。

以數(shù)據(jù)開(kāi)頭的選項(xiàng)不需要屬性名稱中的附加“數(shù)據(jù)”。 例如，dataTextField選項(xiàng)通過(guò)data-text-field屬性設(shè)置，dataSource通過(guò)data-source屬性設(shè)置。 復(fù)雜配置選項(xiàng)設(shè)置為JavaScript對(duì)象文字 - 例如，data-source =“{data：[{name：'John Doe'}，{name：'Jane Doe'}]}”。

以下示例演示如何使用數(shù)據(jù)屬性配置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>

訂閱事件

您可以使用數(shù)據(jù)屬性訂閱Kendo UI小部件事件。 data屬性的值被解析為JavaScript函數(shù)，可在全局范圍內(nèi)使用。 以下示例演示如何通過(guò)數(shù)據(jù)屬性訂閱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>

Kendo UI R2 2019 SP1全新發(fā)布，最新動(dòng)態(tài)請(qǐng)持續(xù)關(guān)注Telerik中文網(wǎng)！

掃描關(guān)注慧聚IT微信公眾號(hào)，及時(shí)獲取最新動(dòng)態(tài)及最新資訊