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ù)。

您可以通過數(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"等。

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

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

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

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

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

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

以下示例演示如何將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">

使用標(biāo)記

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

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

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

注意：

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

在SPA視圖中初始化

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

Hello !" _ue_custom_node_="true">

在MVVM中初始化

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

注意：數(shù)據(jù)綁定屬性語(yǔ)法在窗口小部件選項(xiàng)（在本例中為數(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

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)及最新資訊