概述：Kendo UI Web包含数百个创建HTML5 web app的必备元素，包括UI组件、数据源、验证、一个MVVM框架、主题、模板等。在前面的文章《HTML5 Web app开发工具Kendo UI Web教程：创建自定义组件（二）》中，对在Kendo UI Web中如何创建自定义组件作出了一些基础讲解，下面将继续前面的内容。
- HTML5 Web app开发工具Kendo UI Web教程：如何配置Kendo UI Calendar
- HTML5 Web app开发工具Kendo UI Web教程：如何添加仪表和图表
- HTML5 Web app开发工具Kendo UI Web教程：AutoComplete功能解析
- HTML5 Web app开发工具Kendo UI Web教程：颜色拾取器的使用
- HTML5 Web app开发工具Kendo UI Web教程：Grid网格控件本地化
- HTML5 Web app开发工具Kendo UI Web教程：创建自定义组件（一）
- HTML5 Web app开发工具Kendo UI Web教程：创建自定义组件（二）
Kendo UI Web包含数百个创建HTML5 web app的必备元素，包括UI组件、数据源、验证、一个MVVM框架、主题、模板等。
在前面的文章《HTML5 Web app开发工具Kendo UI Web教程：创建自定义组件（二）》中，对在Kendo UI Web中如何创建自定义组件作出了一些基础讲解，下面将继续前面的内容。
使用一个数据源
现在如果想要实现一个数据源组件或是MVVM aware模式，需要再执行一些其他的步骤。 在下面将会创建一个DataSource aware组件，要使DataSource aware有数据源，首先需要在DataSource基础对象上使用create convenience方法。
创建或初始化数据源：
|
1
|
that.dataSource = kendo.data.DataSource.create(that.options.dataSource);
|
这一行代码主要是为你的组件数据源提供了比较灵活的方式，这个样子你就不用创建一个新的数据源来绑定到组件上。
数据源作为数组：
|
1
2
3
|
$(
"#div"
).kendoRepeater({
dataSource: [
"Item 1"
,
"Item 2"
,
"Item 3"
]
});
|
如果你传递一个简单的数组， kendo.data.DataSource.create方法将会为你创建一个新的基于数组数据的DataSource，并返回到that.dataSource。你也可以通过指定它内嵌的配置值来新建一个datasource。
将数据源作为配置对象：
|
1
2
3
4
5
6
7
8
9
|
$(
"#div"
).kendoRepeater({
dataSource: {
transport: {
read: {
}
}
}
});
|
这里正在设置数据源的配置，但是并没有创建一个实例。这个kendo.data.DataSource.create(that.options.dataSource)将会获得这个配置对象，并用指定的配置返回一个新的DataSource实例。现在已经提供了相同的灵活性，在我们自己的组件中尽可能多的方式对repeater组件指定DataSource。
Handling Events：
接下来需要做的就是绑定到DataSource change事件并处理它。在这里你将会基于从DataSource读取的数据改变你的DOM。通常可以用一个刷新的方法。一般都会公用这个刷新的方法，主要由于在初始化后，你和其他人可能会在组件或某个节点上调用这个高性能。
绑定到Change Event：
|
1
2
3
4
|
// bind to the change event to refresh the widget
that.dataSource.bind(
"change"
,
function
() {
that.refresh();
});
|
有Change Event的组件：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
(
function
($) {
var
kendo = window.kendo,
ui = kendo.ui,
Widget = ui.Widget,
CHANGE =
"change"
;
var
Repeater = kendo.ui.Widget.extend({
init:
function
(element, options) {
var
that =
this
;
kendo.ui.Widget.fn.init.call(that, element, options);
// initialize or create dataSource
that._dataSource();
},
options: {
name:
"Repeater"
},
_dataSource:
function
() {
var
that =
this
;
// returns the datasource OR creates one if using array or configuration
that.dataSource = kendo.data.DataSource.create(that.option.dataSource);
// bind to the change event to refresh the widget
that.dataSource.bind(CHANGE,
function
() {
that.refresh();
});
}
});
kendo.ui.plugin(Repeater);
})(jQuery);
|
现在需要向_dataSource方法添加一些东西，如果需要的话将会从DataSource中提取。通过检查that.options的自动绑定配置值可以实现。接下来是调用that.dataSource.fetch()，需要注意的是，这个fetch和read是不同的，如果这个DataSource还没有被读取，fetch会只会填充DataSource。如果在组件被初始化之前，在DataSource上read已经被调用了的话，那么DataSource就不会再次被读取了。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
_dataSource:
function
() {
var
that =
this
;
// returns the datasource OR creates one if using array or configuration
that.dataSource = kendo.data.DataSource.create(that.options.dataSource);
// bind to the change event to refresh the widget
that.dataSource.bind(CHANGE,
function
() {
that.refresh();
});
// trigger a read on the dataSource if one hasn't happened yet
if
(that.options.autoBind) {
that.dataSource.fetch();
}
}
|
这个自动绑定配置选项还不存在，现在需要添加它到组件上的选项对象中，并赋予一个默认的值为true。在默认的情况下，Kendo UI中所有的DataBound组件都会自动绑定。
为选项添加AutoBind：
|
1
2
3
4
|
options: {
name:
"Repeater"
,
autoBind:
true
}
|
372
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
