当前您所在的位置:首页>新闻中心>新品发布
新品发布
行业动态
营销活动

Kendo UI for jQuery使用教程:使用MVVM初始化(二)

发布时间:2020/10/14 浏览量:1915

Kendo UI目前最新提供KendoUI for jQuery、KendoUI for Angular、KendoUI Support for React和KendoUI 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窗口小部件的模板。

 


data-source="[{firstName:’John’, lastName: ‘Doe’}, {firstName:’Jane’, lastName: ‘Doe’}]"
data-text-field="firstName"
data-template="template" />

 

 

使用标记

您可以通过以下任何方式基于自定义HTML属性初始化窗口小部件:

虽然理论上可以通过jQuery插件语法从同一DOM元素初始化几个不同的Kendo UI小部件,但是标记的声明性初始化不支持它。

注意:

 

在SPA视图中初始化

以下示例引用模板中带有AutoComplete小部件的(SPA)视图。


 

在MVVM中初始化

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

注意:数据绑定属性语法在窗口小部件选项(在本例中为数据源)和视图模型字段(源)之间建立双向绑定。

 

 
Hello !

 

 

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

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

 

 

An autocomplete widget

 

 


A widget bound to the mobile view ViewModel dataSource field

 

 

北京哲想软件有限公司