Kendo UI开发教程(21): Kendo MVVM 数据绑定(十) Source
转载
Source绑定可以把ViewModel的值和由Kendo模板定义的目标元素绑定,如果ViewModel的值发生变化,被绑定的目标元素也随之发生变化。
模板由属性data-template指定,它的值为某个script定义的模板的id.如果没有指明模板,则根据元素的标记使用缺省的模版。
Source绑定到数组
当ViewModel的值 为一数组时,那么通过Source绑定到模板时,会把数组中每个元素逐个应用到模板,最后的输出为应用这些模板的结果的综合。 添加删除数组中的内容,显示的内容也随之变化。
注:绑定到ViewModel数组时,Source指明的为单个跟元素名称,例如:
1 | < ul data-template = "ul-template" data-bind = "source: products" > |
3 | < script id = "ul-template" type = "text/x-kendo-template" > |
5 | id: < span data-bind = "text: id" ></ span > |
6 | name: < span data-bind = "text: name" ></ span > |
8 | </ script > |
9 | < script > |
10 | var viewModel = kendo.observable({ |
12 | { id: 1, name: "Coffee" }, |
13 | { id: 2, name: "Tea" }, |
14 | { id: 3, name: "Juice" } |
18 | kendo.bind($("ul"), viewModel); |
19 | </ script > |
这个例子会输出三个li元素–每个对应到products数组中一个元素,下面为输出的HTML内容:
3 | id: < span >1</ span > |
4 | name: < span >Coffee</ span > |
7 | id: < span >2</ span > |
8 | name: < span >Tea</ span > |
11 | id: < span >3</ span > |
12 | name: < span >Juice</ span > |
如果ViewModel绑定的数组的内容为简单类型(如数字,字符串,日期),这时在模板中需要使用”this”关键字来引用当前数组项:
1 | < ul data-template = "ul-template" data-bind = "source: products" > |
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" ] |
11 | kendo.bind($("ul"), viewModel); |
12 | </ script > |
输出内容如下:
2 | < li >Coffee</ li > |
3 | < li >Tea</ li > |
4 | < li >Juice</ li > |
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 > |
6 | < script > |
7 | var viewModel = kendo.observable({ |
9 | name: "John Doe" |
13 | kendo.bind($("div"), viewModel); |
14 | </ script > |
输出:
2 | Name: < span >John Doe</ span > |
你也可以直接绑定到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 > |
6 | < script > |
7 | var viewModel = kendo.observable({ |
8 | name: "John Doe" |
11 | kendo.bind($("div"), viewModel); |
12 | </ script > |
结果如下:
2 | Name: < span >John Doe</ span > |
Source绑定Select元素
当数组绑定到select元素时,就创建多个option元素。
1 | < select data-bind = "source: colors" ></ select > |
2 | < script > |
3 | var viewModel = kendo.observable({ |
4 | colors: [ "Red", "Green", "Blue" ] |
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({ |
6 | { id: 1, name: "Coffee" }, |
7 | { id: 2, name: "Tea" }, |
8 | { id: 3, name: "Juice" } |
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 > |
本文章为转载内容,我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题,欢迎原作者联系我们进行内容更正或删除文章。