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