在前面的文章《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. Background agent

    Periodic Task Periodic agents run for a small amount of time on a regular recurring interval. Typica ...

  2. 【android应用市场】android应用市场集合

    一.举例 1.酷市场 2.apkpure 国外的应用市场,可不用FQ,没有google play的一些限制 相当于google play的镜像,可以下载google play的应用 3.360手机助手 ...

  3. 全选,不选,反选js

    <!doctype html> <html> <head> <meta charset="utf-8"> <meta name ...

  4. 段落的展开收起(substring的应用)

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  5. Javascript 中的一些关于时间的操作【转】

    1.时间对象和一些简单操作函数 var myDate = new Date(); myDate.getYear();       //获取当前年份(2位) myDate.getFullYear(); ...

  6. iOS App TransportSecurity has blocked a cleartext HTTP (http://) resource load since it isinsecure. Temporary exceptions can be configured via your app's Info.plistfile

    “App TransportSecurity has blocked a cleartext HTTP (http://) resource load since it isinsecure. Tem ...

  7. Layer弹窗组件

    layer是一款近年来备受青睐的web弹层组件,她具备全方位的解决方案,致力于服务各水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验. Layer的开发手册和下载地址 http://layer ...

  8. BizTalk动手实验(一)安装BizTalk Server 2010开发环境

    1 课程简介 通过本课程了解BizTalk 2010的软依赖及基本的安装配置步骤,BizTalk相应的解决方案及高可用性方案可在课程的基础进行深入学习. 2 准备工作 硬件环境:CPU >2.0 ...

  9. window常见事件

    <script type="text/javascript"> /*onunload = function(){ alert("onunload run&qu ...

  10. java基础学习总结——基础语法2

    一.语句