Source绑定可以把ViewModel的值和由Kendo模板定义的目标元素绑定,如果ViewModel的值发生变化,被绑定的目标元素也随之发生变化。
模板由属性data-template指定,它的值为某个script定义的模板的id.如果没有指明模板,则根据元素的标记使用缺省的模版。
Source绑定到数组
当ViewModel的值 为一数组时,那么通过Source绑定到模板时,会把数组中每个元素逐个应用到模板,最后的输出为应用这些模板的结果的综合。 添加删除数组中的内容,显示的内容也随之变化。
注:绑定到ViewModel数组时,Source指明的为单个跟元素名称,例如:
1 |
< ul data-template = "ul-template" data-bind = "source: products" > |
2 |
</ ul > |
3 |
< script id = "ul-template" type = "text/x-kendo-template" > |
4 |
< li > |
5 |
id: < span data-bind = "text: id" ></ span > |
6 |
name: < span data-bind = "text: name" ></ span > |
7 |
</ li > |
8 |
</ script > |
9 |
< script > |
10 |
var viewModel = kendo.observable({ |
11 |
products: [ |
12 |
{ id: 1, name: "Coffee" }, |
13 |
{ id: 2, name: "Tea" }, |
14 |
{ id: 3, name: "Juice" } |
15 |
] |
16 |
}); |
17 |
18 |
kendo.bind($("ul"), viewModel); |
19 |
</ script > |
这个例子会输出三个li元素–每个对应到products数组中一个元素,下面为输出的HTML内容:
1 |
< ul > |
2 |
< li > |
3 |
id: < span >1</ span > |
4 |
name: < span >Coffee</ span > |
5 |
</ li > |
6 |
< li > |
7 |
id: < span >2</ span > |
8 |
name: < span >Tea</ span > |
9 |
</ li > |
10 |
< li > |
11 |
id: < span >3</ span > |
12 |
name: < span >Juice</ span > |
13 |
</ li > |
14 |
</ ul > |
如果ViewModel绑定的数组的内容为简单类型(如数字,字符串,日期),这时在模板中需要使用”this”关键字来引用当前数组项:
1 |
< ul data-template = "ul-template" data-bind = "source: products" > |
2 |
</ ul > |
3 |
< script id = "ul-template" type = "text/x-kendo-template" > |
4 |
< li data-bind = "text: this" ></ li > |
5 |
</ script > |
6 |
< script > |
7 |
var viewModel = kendo.observable({ |
8 |
products: [ "Coffee", "Tea", "Juice" ] |
9 |
}); |
10 |
11 |
kendo.bind($("ul"), viewModel); |
12 |
</ script > |
输出内容如下:
1 |
< ul > |
2 |
< li >Coffee</ li > |
3 |
< li >Tea</ li > |
4 |
< li >Juice</ li > |
5 |
</ ul > |
Source绑定到非数组
source绑定也支持绑定到非数组值,此时在模板中引用到ViewModel的某个属性,最终的结果为模板使用ViewModel后的结果。
1 |
< div data-template = "div-template" data-bind = "source: person" > |
2 |
< script id = "div-template" type = "text/x-kendo-template" > |
3 |
Name: < span data-bind = "text: name" ></ span > |
4 |
</ script > |
5 |
</ div > |
6 |
< script > |
7 |
var viewModel = kendo.observable({ |
8 |
person: { |
9 |
name: "John Doe" |
10 |
} |
11 |
}); |
12 |
13 |
kendo.bind($("div"), viewModel); |
14 |
</ script > |
输出:
1 |
< div > |
2 |
Name: < span >John Doe</ span > |
3 |
</ div > |
你也可以直接绑定到ViewModel对象本身,此时可以使用把source 的值设置为“this”,例如:
1 |
< div data-template = "div-template" data-bind = "source: this" > |
2 |
< script id = "div-template" type = "text/x-kendo-template" > |
3 |
Name: < span data-bind = "text: name" ></ span > |
4 |
</ script > |
5 |
</ div > |
6 |
< script > |
7 |
var viewModel = kendo.observable({ |
8 |
name: "John Doe" |
9 |
}); |
10 |
11 |
kendo.bind($("div"), viewModel); |
12 |
</ script > |
结果如下:
1 |
< div > |
2 |
Name: < span >John Doe</ span > |
3 |
</ div > |
Source绑定Select元素
当数组绑定到select元素时,就创建多个option元素。
1 |
< select data-bind = "source: colors" ></ select > |
2 |
< script > |
3 |
var viewModel = kendo.observable({ |
4 |
colors: [ "Red", "Green", "Blue" ] |
5 |
}); |
6 |
7 |
kendo.bind($("select"), viewModel); |
8 |
</ script > |
输出的HTML元素如下:
1 |
< select > |
2 |
< option >Red</ option > |
3 |
< option >Green</ option > |
4 |
< option >Blue</ option > |
5 |
</ select > |
select元素也可以绑定到JavaScript对象数组(非简单类型),此时可以同时指定data-text-field,data-value-field 用来指定option元素的value和text属性,例如:
1 |
< select data-text-field = "name" data-value-field = "id" |
2 |
data-bind = "source: products" ></ select > |
3 |
< script > |
4 |
var viewModel = kendo.observable({ |
5 |
products: [ |
6 |
{ id: 1, name: "Coffee" }, |
7 |
{ id: 2, name: "Tea" }, |
8 |
{ id: 3, name: "Juice" } |
9 |
] |
10 |
}); |
11 |
12 |
kendo.bind($("select"), viewModel); |
13 |
</ script > |
输出如下:
1 |
< select > |
2 |
< option value = "1" >Coffee</ option > |
3 |
< option value = "2" >Tea</ option > |
4 |
< option value = "3" >Juice</ option > |
5 |
</ select > |