您的位置：首页 > 产品设计 > UI/UE

Kendo UI开发教程(21): Kendo MVVM 数据绑定(十) Source

2013-09-10 20:13 471 查看

Source绑定可以把ViewModel的值和由Kendo模板定义的目标元素绑定，如果ViewModel的值发生变化，被绑定的目标元素也随之发生变化。
模板由属性data-template指定，它的值为某个script定义的模板的id.如果没有指明模板，则根据元素的标记使用缺省的模版。

Source绑定到数组

当ViewModel的值为一数组时，那么通过Source绑定到模板时，会把数组中每个元素逐个应用到模板，最后的输出为应用这些模板的结果的综合。添加删除数组中的内容，显示的内容也随之变化。

注：绑定到ViewModel数组时，Source指明的为单个跟元素名称，例如：

1	< ul data-template = "ul-template" data-bind = "source: products" >

</

ul

3	< script id = "ul-template" type = "text/x-kendo-template" >

li

5	id: < span data-bind = "text: id" ></ span >

6	name: < span data-bind = "text: name" ></ span >

</

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" }

});

18	kendo.bind($("ul"), viewModel);

19	</ script >

这个例子会输出三个li元素–每个对应到products数组中一个元素，下面为输出的HTML内容：

ul

li

3	id: < span >1</ span >

4	name: < span >Coffee</ span >

</

li

li

7	id: < span >2</ span >

8	name: < span >Tea</ span >

</

li

li

11	id: < span >3</ span >

12	name: < span >Juice</ span >

</

li

</

ul

如果ViewModel绑定的数组的内容为简单类型（如数字，字符串，日期），这时在模板中需要使用”this”关键字来引用当前数组项：

1	< ul data-template = "ul-template" data-bind = "source: products" >

</

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" ]

});

11	kendo.bind($("ul"), viewModel);

12	</ script >

输出内容如下：

ul

2	< li >Coffee</ li >

3	< li >Tea</ li >

4	< li >Juice</ li >

</

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 >

</

div

6	< script >

7	var viewModel = kendo.observable({

person: {

9	name: "John Doe"

});

13	kendo.bind($("div"), viewModel);

14	</ script >

输出：

div

2	Name: < span >John Doe</ span >

</

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 >

</

div

6	< script >

7	var viewModel = kendo.observable({

8	name: "John Doe"

});

11	kendo.bind($("div"), viewModel);

12	</ script >

结果如下：

div

2	Name: < span >John Doe</ span >

</

div

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({

5	products: [

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 >

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航