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

本文链接：https://blog.youkuaiyun.com/mapdigit/article/details/11492629

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>
 
    10var viewModel = kendo.observable({
 
    11    products: [
 
    12        { id: 1, name: "Coffee" },
 
    13        { id: 2, name: "Tea" },
 
    14        { id: 3, name: "Juice" }
 
    15    ]
 
    16});
 
    17 
 
    18kendo.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>
 
    7var viewModel = kendo.observable({
 
    8    products: [ "Coffee", "Tea", "Juice" ]
 
    9});
 
    10 
 
    11kendo.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>
 
    7var viewModel = kendo.observable({
 
    8    person: {
 
    9        name: "John Doe"
 
    10    }
 
    11});
 
    12 
 
    13kendo.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>
 
    7var viewModel = kendo.observable({
 
    8    name: "John Doe"
 
    9});
 
    10 
 
    11kendo.bind($("div"), viewModel);
 
    12</script>

结果如下：

 
    1<div>
 
    2Name: <span>John Doe</span>
 
    3</div>

Source绑定Select元素

当数组绑定到select元素时，就创建多个option元素。

 
    1<select data-bind="source: colors"></select>
 
    2<script>
 
    3var viewModel = kendo.observable({
 
    4    colors: [ "Red", "Green", "Blue" ]
 
    5});
 
    6 
 
    7kendo.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>
 
    4var viewModel = kendo.observable({
 
    5    products: [
 
    6        { id: 1, name: "Coffee" },
 
    7        { id: 2, name: "Tea" },
 
    8        { id: 3, name: "Juice" }
 
    9    ]
 
    10});
 
    11 
 
    12kendo.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>