Kendo UI for jQuery使用教程:使用MVVM初始化(二)
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方法。
以下示例演示如何将成员函数用作事件处理程序。
<div id="container">
<input data-role="numerictextbox" data-change="handler.numerictextbox_change" />
</div>
<script>
var handler = {
numerictextbox_change: function (e) {
// Handle the "change" event
}
};
kendo.bind($("#container"));
</script>
设置数据源
数据绑定的Kendo UI小部件的数据源也可以通过数据属性进行设置。 该值可以是JavaScript对象、数组或全局范围中可用的变量。
以下示例演示如何将Kendo UI窗口小部件的数据源设置为JavaScript对象。
<div id="container">
<input data-role="autocomplete" data-source="{data:['One', 'Two']}" />
</div>
<script>
kendo.bind($("#container"));
</script>
以下示例演示如何将Kendo UI窗口小部件的数据源设置为JavaScript数组。
<div id="container">
<input data-role="autocomplete" data-source="['One', 'Two']" />
</div>
<script>
kendo.bind($("#container"));
</script>
以下示例演示如何将Kendo UI窗口小部件的数据源设置为全局范围中可用的变量。
<div id="container">
<input data-role="autocomplete" data-source="dataSource" />
</div>
<script>
var dataSource = new kendo.data.DataSource( {
data: [ "One", "Two" ]
});
kendo.bind($("#container"));
</script>
使用模板
通过使用数据属性,您还可以设置模板配置。 属性值被解析为具有模板内容的脚本元素的id属性。
以下示例演示如何设置Kendo UI窗口小部件的模板。
<div id="container"><input data-role="autocomplete"data-source="[{firstName:'John', lastName: 'Doe'}, {firstName:'Jane', lastName: 'Doe'}]"data-text-field="firstName"data-template="template" /></div>
<script id="template" type="text/x-kendo-template">
<span>#: firstName # #: lastName #</span>
</script>
<script>
kendo.bind($("#container"));
</script>
使用标记
您可以通过以下任何方式基于自定义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)视图。
<div id="container"></div><script id="index" type="text/x-kendo-template"><div>Hello <input data-role="autocomplete" data-source="['foo', 'bar', 'baz']" />!</div></script>
<script>
var index = new kendo.View('index');
index.render("#container");
</script>
在MVVM中初始化
以下示例引用带有AutoComplete小部件的MVVM绑定DOM元素。
注意:数据绑定属性语法在窗口小部件选项(在本例中为数据源)和视图模型字段(源)之间建立双向绑定。
<div id="container"><div>Hello <input data-role="autocomplete" data-bind="source: source" />!</div></div>
<script>
kendo.bind($("#container"), {
source: ['foo', 'bar', 'baz']
});
</script>
在混合UI应用程序中初始化
以下示例引用具有View和AutoComplete小部件的Kendo UI混合应用程序。
<div data-role="view" data-model="foo"><div>An autocomplete widget<input data-role="autocomplete" data-source="['foo', 'bar', 'baz']" /></div>
<div>
A widget bound to the mobile view ViewModel dataSource field
<input data-role="autocomplete" data-bind="source: dataSource" />
</div>
</div>
<script>
var foo = kendo.observable({
dataSource: ['foo', 'bar', 'baz']
});
new kendo.mobile.Application();
</script>
Kendo UI R2 2019 SP1全新发布,最新动态请持续关注Telerik中文网!
扫描关注慧聚IT微信公众号,及时获取最新动态及最新资讯

Kendo UI for jQuery使用教程:使用MVVM初始化(二)的更多相关文章
- Kendo UI for jQuery使用教程:使用MVVM初始化(一)
[Kendo UI for jQuery最新试用版下载] Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support ...
- Kendo UI for jQuery使用教程:入门指南
[Kendo UI for jQuery最新试用版下载] Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support ...
- Kendo UI for jQuery使用教程:方法和事件
[Kendo UI for jQuery最新试用版下载] Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support ...
- Kendo UI for jQuery使用教程:初始化jQuery插件
[Kendo UI for jQuery最新试用版下载] Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support ...
- Kendo UI for jQuery使用教程:小部件DOM元素结构
[Kendo UI for jQuery最新试用版下载] Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support ...
- Kendo UI for jQuery使用教程——创建自定义捆绑包
[Kendo UI for jQuery最新试用版下载] Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support ...
- Kendo UI for jQuery使用教程——使用NPM/NuGet进行安装
[Kendo UI for jQuery最新试用版下载] Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support ...
- Kendo UI for jQuery使用教程:操作系统/jQuery支持等
[Kendo UI for jQuery最新试用版下载] Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support ...
- Kendo UI for jQuery使用教程:支持Web浏览器
[Kendo UI for jQuery最新试用版下载] Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support ...
随机推荐
- ‘No module named 'numpy.core._multiarray_umath’ 或者‘no module named numpy’
在import TensorFlow时,如果遇到‘No module named 'numpy.core._multiarray_umath’ 或者‘no module named numpy’,大多 ...
- docker遇到防火墙报错问题解决方法
-- 报错信息[root@localhost docker]# docker run -d -p 5000:5000 training/webapp python app.pycc61442060cb ...
- Pytorch修改ResNet模型全连接层进行直接训练
之前在用预训练的ResNet的模型进行迁移训练时,是固定除最后一层的前面层权重,然后把全连接层输出改为自己需要的数目,进行最后一层的训练,那么现在假如想要只是把 最后一层的输出改一下,不需要加载前面层 ...
- CVE-2018-2628
哈哈哈,终于等到我复现一个CVE漏洞了. 漏洞描述 Oracle Fusion Middleware(Oracle融合中间件)是美国甲骨文(Oracle)公司的一套面向企业和云环境的业务创新平台.该平 ...
- 小菜鸟之Oracle数据库
select * from STUDENT; select * from mark; select * from COURSE; select * from teacher; --注释 select ...
- 手写Spring MVC
闲及无聊 又打开了CSDN开始看一看有什么先进的可以学习的相关帖子,这时看到了一位大神写的简历装X必备,手写Spring MVC. 我想这个东西还是有一点意思的 就拜读了一下大佬的博客 通读了一遍相关 ...
- javaScript的Array方法
仅个人总结 声明方法: var arr = new Array(); var arr = new Array(1,2,3,4,5); var arr = new array(size);//当为一个参 ...
- Python 入门 之 print带颜色输出
Python 入门 之 print带颜色输出 1.print带颜色输出书写格式: 开头部分: \033[显示方式; 前景色 ; 背景色 m 结尾部分: \033[0m 详解: 开头部分的三个参数: 显 ...
- centos7 安装vim
刚安装的centos7一般只有vi可以用,vim是没有安装的,如果我们想使用的话,需要我们自己去安装,可以使用如下命令进行安装: yum -y install vim 安装之后就可以正常使用
- 107、如何配置 Health Check ? (Swarm14)
参考https://www.cnblogs.com/CloudMan6/p/8053323.html 容器状态是UP的,那应用就是健康的吗? 不一定 Docker 只能从容器启动进程的返 ...