在前面的文章《HTML5 UI框架Kendo UI Web自定义组件(一)》中,对在Kendo UI Web中如何创建自定义组件作出了一些基础讲解,下面将继续前面的内容。

使用一个数据源

现在如果想要实现一个数据源组件或是MVVM aware模式,需要再执行一些其他的步骤。 在下面将会创建一个DataSource aware组件,要使DataSource aware有数据源,首先需要在DataSource基础对象上使用create convenience方法。

创建或初始化数据源:

that.dataSource = kendo.data.DataSource.create(that.options.dataSource);

这一行代码主要是为你的组件数据源提供了比较灵活的方式,这个样子你就不用创建一个新的数据源来绑定到组件上。

数据源作为数组:

    $("#div").kendoRepeater({
dataSource: ["Item 1", "Item 2", "Item 3"]
});

如果你传递一个简单的数组, kendo.data.DataSource.create方法将会为你创建一个新的基于数组数据的DataSource,并返回到that.dataSource。你也可以通过指定它内嵌的配置值来新建一个datasource。

将数据源作为配置对象:

    $("#div").kendoRepeater({
dataSource: {
transport: {
read: {
url: "http://mydomain/customers"
}
}
}
});

这里正在设置数据源的配置,但是并没有创建一个实例。这个 kendo.data.DataSource.create(that.options.dataSource)将会获得这个配置对象,并用指定的配置返 回一个新的DataSource实例。现在已经提供了相同的灵活性,在我们自己的组件中尽可能多的方式对repeater组件指定DataSource。

Handling Events

接下来需要做的就是绑定到DataSource change事件并处理它。在这里你将会基于从DataSource读取的数据改变你的DOM。通常可以用一个刷新的方法。一般都会公用这个刷新的方法, 主要由于在初始化后,你和其他人可能会在组件或某个节点上调用这个高性能。

>>>示例代码

Kendo UI Web下载

HTML5 UI框架Kendo UI Web中如何创建自定义组件(二)的更多相关文章

  1. HTML5 UI框架Kendo UI Web教程:创建自定义组件(三)

    Kendo UI Web包 含数百个创建HTML5 web app的必备元素,包括UI组件.数据源.验证.一个MVVM框架.主题.模板等.在前面的2篇文章<HTML5 Web app开发工具Ke ...

  2. HTML5 UI框架Kendo UI Web自定义组件(一)

    Kendo UI Web包含数百个创建HTML5 web app的必备元素,包括UI组件.数据源.验证.一个MVVM框架.主题.模板等.在Kendo UI Web中如何创建自定义组件呢,在下面的文章中 ...

  3. HTML5 UI框架Kendo UI Web中如何实现Grid网格控件本地化

    Kendo UI Web包含数百个创建HTML5 web app的必备元素,包括UI组件.数据源.验证.一个MVVM框架.主题.模板等. 为了使得产品可以符合不同市场的本地化需求和语言,Kendo U ...

  4. jQuery UI vs Kendo UI & jQuery Mobile vs Kendo UI Mobile

    jQuery UI vs Kendo UI http://jqueryuivskendoui.com/#introduction jQuery Mobile vs Kendo UI Mobile ht ...

  5. Vuejs中slot实现自定义组件header、footer等

    Vuejs中slot实现自定义组件header.footer等 vue中的slot主要负责内容分发,之前有介绍过slot的内容,具体链接:http://www.cnblogs.com/vipzhou/ ...

  6. 创新高性能移动 UI 框架-Canvas UI 框架

    WebView 里无法获得的能力虽然是「体验增强」与「端基本能力」,但现都基本上有成熟解决方法.但后期的 UI 和 Layout 的性能反而是目前 Web 技术欠缺的.所以,无论是 Titanium ...

  7. 很好的开源UI框架Chico UI

    介绍一个很好的开源的UI框架,依赖于jquery 官网:http://www.chico-ui.com.ar/ 以下是相关截图: 消息提示 自动完成 分页,列表 Chico UI是什么? Chico ...

  8. 通过了解Servlet和Http之间的关系,了解web中http通信使用(二)

    注:图片如果损坏,点击文章链接:https://www.toutiao.com/i6512399401825075719/ 1.<Servlet简单实现开发部署过程> 2.<Serv ...

  9. Scrollview中嵌套ListView(自定义组件解决)

    首先,ScrollView中只能放一个控件,一般都放LinearLayout,orientation属性值为vertical.在LinearLayout中放需要呈现的内容.ListView也在其中,L ...

随机推荐

  1. 1055. The World's Richest (25)

    Forbes magazine publishes every year its list of billionaires based on the annual ranking of the wor ...

  2. [CareerCup] 15.5 Denormalization 逆规范化

    15.5 What is denormalization? Explain the pros and cons. 逆规范化Denormalization是一种通过添加冗余数据的数据库优化技术,可以帮助 ...

  3. 1021上课演练----SQL注入与避免(银行系统)

    package com.bank; import java.sql.CallableStatement; import java.sql.Connection; import java.sql.Dat ...

  4. oracle 连接查询,和(+)符号的用法

    --连接查询 左链接.右链接,全链接 --内链接select e.account 用户名, e.empname 名称, c.comname 公司名称  from employee e inner jo ...

  5. 读《深入php面向对象、模式与实践》有感(一)

    什么样的代码需要改进?书中给出了四个标准(我个人比较认可这四个标准,实际开发中也的确时常遇到): 一.代码重复 用书中的原话讲:“如果你在写代码的时候,总是感觉似曾相识,很可能你的代码已经重复了”. ...

  6. 【HDU4419 Colourful Rectangle】 线段树面积并

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4419 题目大意:给你n个矩形,每个矩形都有一种颜色,矩形覆盖会出现另外一种颜色,问你所有矩形中不同的颜 ...

  7. ajaxfileupload.js支持多文件上传【转载】

    //修改前代码------- //var oldElement = jQuery('#' + fileElementId); //var newElement = jQuery(oldElement) ...

  8. 5_STL设计理念_迭代器

    他山之石,可以攻玉. http://blog.csdn.net/jxh_123/article/details/30793397?utm_source=tuicool&utm_medium=r ...

  9. Python开发问题和解决方案汇集

    1.Sublime Text中用Tab批量替换空格Whitespace缩进:Ctrl+A全选代码,Ctrl+Shift+P打开下拉框,输入indent,找到Convert indentation to ...

  10. Kinect 图像帧的格式

    一.ColorImageFormat:彩色图像帧的格式 RawYuvResolution640x480Fps15 原始YUV格式,分辨率是640x480,每秒15帧: RgbResolution128 ...