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>

 

Kendo UI开发教程(21): Kendo MVVM 数据绑定(十) Source的更多相关文章

  1. Kendo UI开发教程(16): Kendo MVVM 数据绑定(五) Events

    本篇和Kendo UI开发教程(14): Kendo MVVM 数据绑定(三) Click类似,为事件绑定的一般形式.Events绑定支持将ViewModel的方法绑定到DOM元素的事件处理(如鼠标事 ...

  2. Kendo UI开发教程(9): Kendo UI Validator 概述

    Kendo UI Validator 支持了客户端校验的便捷方法,它基于HTML 5 的表单校验功能,支持很多内置的校验规则,同时也提供了自定义规则的便捷方法. 完整的Kendo UI 的Valida ...

  3. Kendo UI开发教程(6): Kendo DataSource 概述

    Kendo 的数据源支持本地数据源(JavaScript 对象数组),或者远程数据源(XML, JSON, JSONP),支持CRUD操作(创建,读取,更新和删除操作),并支持排序,分页,过滤,分组和 ...

  4. Kendo UI开发教程(7): Kendo UI 模板概述

    Kendo UI 框架提供了一个易用,高性能的JavaScript模板引擎.通过模板可以创建一个HTML片段然后可以和JavaScript数据合并成最终的HTML元素. Kendo 模板侧重于UI显示 ...

  5. Kendo UI开发教程(8): Kendo UI 特效概述

    Kendo UI Fx 提供了一个丰富,可扩展,性能经过优化的工具集合用来完成HTML元素的过渡显示.每种特效近可能的使用CSS Transition ,对于一些老版本浏览器使用修改属性的方法作为补充 ...

  6. Kendo UI开发教程(22): Kendo MVVM 数据绑定(十一) Value

    Value绑定可以把ViewModel的某个属性绑定到DOM元素或某个UI组件的Value属性.当用户修改DOM元素或UI组件的值时,绑定的ViewModel的值也随之发生改名.同样,如果ViewMo ...

  7. Kendo UI开发教程(14): Kendo MVVM 数据绑定(三) Click

    Click绑定可以把由ViewModel定义的方法不绑定到目标DOM的click事件.当点击目标DOM元素时触发ViewModel的对应方法.例如: 使用Click绑定 1 <div id=&q ...

  8. Kendo UI开发教程(20): Kendo MVVM 数据绑定(九) Text

    Text绑定可以使用ViewModel来设置DOM元素的文本属性,如果需要设置input,textarea,或select的显示,需要使用value属性. 1 <span data-bind=& ...

  9. [置顶] Kendo UI开发教程: Kendo UI 示例及总结

    前面基本介绍完Kendo UI开发的基本概念和开发步骤,Kendo UI的示例网站为http://demos.kendoui.com/ ,包含了三个部分 Web DemoMobile DemoData ...

随机推荐

  1. asp.net中MVC多语言包的使用

    Global.asax.cs文件 protected void Application_AcquireRequestState(object sender, EventArgs e) { if (Ht ...

  2. Huffman树编码-优先队列实现

    Huffman编码是之前一道算法作业题,最近又要复习考试了,先把这个的代码再看一下吧. 算法原理很简单,使用优先队列将两个节点弹出,然后合并节点之后再入队列如此循环做下去即可. 主要问题在于树的修改问 ...

  3. 自定义UIViewController与xib文件关系深入分析

    6月14日 上海 OSC 源创会开始报名啦,有很多机械键盘送哦!!! 用xcode模板向工程加入UIViewController sub class的时候,如果选中了with xib for inte ...

  4. JNI之HelloWorld

    什么是JNI? JNI java本地开发接口 JNI 是一个协议 这个协议用来沟通java代码和外部的本地代码(c/c++). 通过这个协议,java代码就可以调用外部的c/c++代码 外部的c/c+ ...

  5. ubuntu学习: apt-get命令

    1.apt-get update 更新软件源本地缓存文件 2.apt-cache search 查找软件包,找到想要安装的包,如 sudo apt-cache search mysql-server ...

  6. 【CSDN博客之星评选】我为什么坚持写博客

    今天无意中在CSDN的博客之星评选活动看到自己竟然是候选人之一,真的是十分的惊讶也十分的高兴.对于喜欢写东西.喜欢分享的我来说,已经忍不住用文字来记录一下今天的美好心情,同时也让我回想起我是如何开始在 ...

  7. 面向对象(类,实例变量,方法定义,方法重载,构造方法,this,string类)

    面向对象 类是由属性和方法组成 类是所有创建对象的模板 实例变量有默认值 实例变量至少在本类范围中有效 实例变量与局部变量冲突时,局部变量优先 类中方法定义类似于函数定义 修饰符 返回值类型 方法名( ...

  8. HDOJ 2680 Dijkstra

    题目大意: 给你一个有向图,一个起点集合,一个终点,求最短路.... 解题思路: 1.自己多加一个超级源点,把起点集合连接到超级源点上,然后将起点与超级源点的集合的路径长度设为0,这样就称为一个n+1 ...

  9. android之View的启动过程

    转自:http://www.cdtarena.com/gpx/201308/9607.html 程序里调用了onSizeChanged方法进行了一些设置,不知道onSizeChanged是在什么时候启 ...

  10. 基于visual Studio2013解决C语言竞赛题之1003字母打印

        题目 解决代码及点评 ///************************************************************************/ ...