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

以下示例演示如何将成员函数用作事件处理程序。

<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初始化(二)的更多相关文章

  1. Kendo UI for jQuery使用教程:使用MVVM初始化(一)

    [Kendo UI for jQuery最新试用版下载] Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support ...

  2. Kendo UI for jQuery使用教程:入门指南

    [Kendo UI for jQuery最新试用版下载] Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support ...

  3. Kendo UI for jQuery使用教程:方法和事件

    [Kendo UI for jQuery最新试用版下载] Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support ...

  4. Kendo UI for jQuery使用教程:初始化jQuery插件

    [Kendo UI for jQuery最新试用版下载] Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support ...

  5. Kendo UI for jQuery使用教程:小部件DOM元素结构

    [Kendo UI for jQuery最新试用版下载] Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support ...

  6. Kendo UI for jQuery使用教程——创建自定义捆绑包

    [Kendo UI for jQuery最新试用版下载] Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support ...

  7. Kendo UI for jQuery使用教程——使用NPM/NuGet进行安装

    [Kendo UI for jQuery最新试用版下载] Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support ...

  8. Kendo UI for jQuery使用教程:操作系统/jQuery支持等

    [Kendo UI for jQuery最新试用版下载] Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support ...

  9. Kendo UI for jQuery使用教程:支持Web浏览器

    [Kendo UI for jQuery最新试用版下载] Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support ...

随机推荐

  1. httpClient 进行get请求

    String url = baseUrl; logger.info("checkIfTheFolderIsExist"); CloseableHttpClient httpClie ...

  2. appium环境搭建步骤

    前提条件是:搭建selenium环境(侵权删) 1.安装jdk,配置环境变量: JAVA_HOME C:\Program Files\Java\jdk1.8.0_60(jdk的存放路径) CLASSP ...

  3. springboot整合springdatajpa时jar冲突

    1.springboot整合springdatajpa测试时报No bean named 'entityManagerFactory' available错误 2.运行springboot主程序时报以 ...

  4. reids集群状态正常redis.clients.jedis.exceptions.JedisNoReachableClusterNodeException: No reachable node in cluster

    重新启动redis集群时启动失败,报错: redis.clients.jedis.exceptions.JedisNoReachableClusterNodeException: No reachab ...

  5. 爬取百度贴吧前1000页内容(requests库面向对象思想实现)

    此程序以李毅吧为例子,以面向对象的设计思想实现爬取保存网页数据,暂时并未用到并发处理,以后有机会的话会加以改善 首先去百度贴吧分析贴吧地址栏中url后的参数,找到分页对应的参数pn,贴吧名字对应的参数 ...

  6. 平面割线平分点(构造)--牛客第三场-- Magic Line

    题意: 给你n个点的坐标,让你给出两个点,这两个点的连线可以平分这些点. 思路: 先按y的大小排序,在按x的小排序,再搞一下就行了.如下图: #include <bits/stdc++.h> ...

  7. JavaScript处理股票数据

    1, 先使用Ajax发送异步请求到:http://hq.sinajs.cn/list=s_sh000001 2, 然后用[,]切割成数组https://www.w3school.com.cn/js/j ...

  8. springboot JPA mysql

    官方文档 https://docs.spring.io/spring-data/jpa/docs/1.11.10.RELEASE/reference/html/ 常用关键字 通常,JPA的查询创建机制 ...

  9. Java Integer中的IntegerCache小记

      同事今天给我发了一个关于Java拆装箱的ppt,里面有这么一段代码 Integer c = Integer.valueOf(3); Integer d = Integer.valueOf(3); ...

  10. 02 Linux常用基本命令(二)

    1.Linux的文件系统格式 1.以 / 为根目录,成树状结构分布 2.查看根目录下有什么 ls / 3./下有超级用户root的家目录(root),还有普通用户的家目录(/home) 4.常用文件夹 ...