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方法。

以下示例演示如何將成員函數用作事件處理程序。

設置數據源

數據綁定的Kendo UI小部件的數據源也可以通過數據屬性進行設置。 該值可以是JavaScript對象、數組或全局范圍中可用的變量。

以下示例演示如何將Kendo UI窗口小部件的數據源設置為JavaScript對象。

以下示例演示如何將Kendo UI窗口小部件的數據源設置為JavaScript數組。

以下示例演示如何將Kendo UI窗口小部件的數據源設置為全局范圍中可用的變量。

使用模板

通過使用數據屬性，您還可以設置模板配置。 屬性值被解析為具有模板內容的腳本元素的id屬性。

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

#: firstName # #: lastName #  " _ue_custom_node_="true">

使用標記

您可以通過以下任何方式基于自定義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）視圖。

Hello !" _ue_custom_node_="true">

在MVVM中初始化

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

注意：數據綁定屬性語法在窗口小部件選項（在本例中為數據源）和視圖模型字段（源）之間建立雙向綁定。

Hello !

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

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

An autocomplete widget  A widget bound to the mobile view ViewModel dataSource field

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