HTML5 UI框架Kendo UI Web中如何创建自定义组件(二)
2013-11-18 09:51
681 查看
在前面的文章《HTML5 UI框架Kendo UI Web自定义组件(一)》中,对在Kendo UI Web中如何创建自定义组件作出了一些基础讲解,下面将继续前面的内容。
使用一个数据源
现在如果想要实现一个数据源组件或是MVVM aware模式,需要再执行一些其他的步骤。 在下面将会创建一个DataSource aware组件,要使DataSource aware有数据源,首先需要在DataSource基础对象上使用create convenience方法。
创建或初始化数据源:
这一行代码主要是为你的组件数据源提供了比较灵活的方式,这个样子你就不用创建一个新的数据源来绑定到组件上。
数据源作为数组:
如果你传递一个简单的数组, kendo.data.DataSource.create方法将会为你创建一个新的基于数组数据的DataSource,并返回到that.dataSource。你也可以通过指定它内嵌的配置值来新建一个datasource。
将数据源作为配置对象:
这里正在设置数据源的配置,但是并没有创建一个实例。这个 kendo.data.DataSource.create(that.options.dataSource)将会获得这个配置对象,并用指定的配置返 回一个新的DataSource实例。现在已经提供了相同的灵活性,在我们自己的组件中尽可能多的方式对repeater组件指定DataSource。
Handling Events:
接下来需要做的就是绑定到DataSource change事件并处理它。在这里你将会基于从DataSource读取的数据改变你的DOM。通常可以用一个刷新的方法。一般都会公用这个刷新的方法, 主要由于在初始化后,你和其他人可能会在组件或某个节点上调用这个高性能。
>>>示例代码
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中如何创建自定义组件(二)
- HTML5 Web app开发工具Kendo UI Web教程:创建自定义组件(一)
- Ionic如何创建自定义展开标题组件
- HTML5 Web app开发工具Kendo UI Web教程:创建自定义组件(二)
- HTML5 Web app开发工具Kendo UI Web教程:创建自定义组件(三)
- HTML5 UI框架Kendo UI Web教程:创建自定义组件(三)
- 如何创建FLEX自定义组件(1)
- vue-cli中如何创建并引入自定义组件
- HTML5 UI框架Kendo UI Web教程:创建自定义组件(三)
- vue-cli中如何创建并引入自定义组件
- Yii2.0 创建一个自定义组件方法
- Android 自定义组件之如何实现自定义组件
- VISIO 中如何创建自定义形状
- ABAP--如何创建自定义打印条码 (转)
- 接下来的例子演示了Flex Gumbo中如何通过自定义Skin和alpha属性,创建透明填充色TextArea。
- 如何利用WordPress创建自定义注册表单插件
- 如何创建跨浏览器的HTML5表单
- ASP.NET MVC 之如何创建自定义路由约束
- 如何使用VB创建服务器端组件
- 如何使用HTML5创建在线精美简历