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是創(chuàng)建現(xiàn)代Web應(yīng)用程序的最完整UI庫。

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

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

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

當頁面上有許多Kendo UI小部件時，從數(shù)據(jù)屬性初始化很方便，因為小部件配置是在目標元素中聲明的。

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

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

設(shè)置事件處理程序

您還可以將事件處理程序設(shè)置為成員函數(shù)。 例如，可以將事件數(shù)據(jù)屬性設(shè)置為foo.bar，將其解析為全局范圍中可用的foo對象的bar方法。

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

設(shè)置數(shù)據(jù)源

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

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

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

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

使用模板

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

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

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

使用標記

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

• View和移動應(yīng)用程序根據(jù)角色HTML5數(shù)據(jù)屬性實例化小部件，兩者都在內(nèi)部使用MVVM。
• kendo.bind方法掃描傳遞的DOM元素內(nèi)容來獲取數(shù)據(jù)角色屬性并實例化相應(yīng)的小部件。
• Kendo UI AngularJS指令支持基于自定義元素屬性或自定義標記名稱的聲明性初始化。

雖然理論上可以通過jQuery插件語法從同一DOM元素初始化幾個不同的Kendo UI小部件，但是標記的聲明性初始化不支持它。

注意：

• 數(shù)據(jù)屬性初始化不是為與Kendo UI服務(wù)器封裝器組合而設(shè)計的。 封裝器的使用等同于jQuery插件語法初始化。 要通過MVVM或AngularJS機制創(chuàng)建Kendo UI小部件實例，請不要對這些實例使用服務(wù)器封裝器。
• 從HTML元素初始化Kendo UI小部件，這些元素是DOM樹的一部分。 從文檔片段創(chuàng)建小部件可能會導(dǎo)致意外的副作用或?qū)е翵avaScript錯誤。

在SPA視圖中初始化

以下示例引用模板中帶有AutoComplete小部件的（SPA）視圖。

Hello !" _ue_custom_node_="true">

在MVVM中初始化

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

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

Hello !

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

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

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

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