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 > |
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); |
这个例子会输出三个li元素–每个对应到products数组中一个元素,下面为输出的HTML内容:
4 |
name: < span >Coffee</ 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 > |
7 |
var viewModel = kendo.observable({ |
8 |
products: [ "Coffee", "Tea", "Juice" ] |
11 |
kendo.bind($("ul"), viewModel); |
输出内容如下:
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 > |
7 |
var viewModel = kendo.observable({ |
13 |
kendo.bind($("div"), viewModel); |
输出:
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 > |
7 |
var viewModel = kendo.observable({ |
11 |
kendo.bind($("div"), viewModel); |
结果如下:
2 |
Name: < span >John Doe</ span > |
Source绑定Select元素
当数组绑定到select元素时,就创建多个option元素。
1 |
< select data-bind = "source: colors" ></ select > |
3 |
var viewModel = kendo.observable({ |
4 |
colors: [ "Red", "Green", "Blue" ] |
7 |
kendo.bind($("select"), viewModel); |
输出的HTML元素如下:
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 > |
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); |
输出如下:
2 |
< option value = "1" >Coffee</ option > |
3 |
< option value = "2" >Tea</ option > |
4 |
< option value = "3" >Juice</ option > |
- Kendo UI开发教程(16): Kendo MVVM 数据绑定(五) Events
本篇和Kendo UI开发教程(14): Kendo MVVM 数据绑定(三) Click类似,为事件绑定的一般形式.Events绑定支持将ViewModel的方法绑定到DOM元素的事件处理(如鼠标事 ...
- Kendo UI开发教程(9): Kendo UI Validator 概述
Kendo UI Validator 支持了客户端校验的便捷方法,它基于HTML 5 的表单校验功能,支持很多内置的校验规则,同时也提供了自定义规则的便捷方法. 完整的Kendo UI 的Valida ...
- Kendo UI开发教程(6): Kendo DataSource 概述
Kendo 的数据源支持本地数据源(JavaScript 对象数组),或者远程数据源(XML, JSON, JSONP),支持CRUD操作(创建,读取,更新和删除操作),并支持排序,分页,过滤,分组和 ...
- Kendo UI开发教程(7): Kendo UI 模板概述
Kendo UI 框架提供了一个易用,高性能的JavaScript模板引擎.通过模板可以创建一个HTML片段然后可以和JavaScript数据合并成最终的HTML元素. Kendo 模板侧重于UI显示 ...
- Kendo UI开发教程(8): Kendo UI 特效概述
Kendo UI Fx 提供了一个丰富,可扩展,性能经过优化的工具集合用来完成HTML元素的过渡显示.每种特效近可能的使用CSS Transition ,对于一些老版本浏览器使用修改属性的方法作为补充 ...
- Kendo UI开发教程(22): Kendo MVVM 数据绑定(十一) Value
Value绑定可以把ViewModel的某个属性绑定到DOM元素或某个UI组件的Value属性.当用户修改DOM元素或UI组件的值时,绑定的ViewModel的值也随之发生改名.同样,如果ViewMo ...
- Kendo UI开发教程(14): Kendo MVVM 数据绑定(三) Click
Click绑定可以把由ViewModel定义的方法不绑定到目标DOM的click事件.当点击目标DOM元素时触发ViewModel的对应方法.例如: 使用Click绑定 1 <div id=&q ...
- Kendo UI开发教程(20): Kendo MVVM 数据绑定(九) Text
Text绑定可以使用ViewModel来设置DOM元素的文本属性,如果需要设置input,textarea,或select的显示,需要使用value属性. 1 <span data-bind=& ...
- [置顶] Kendo UI开发教程: Kendo UI 示例及总结
前面基本介绍完Kendo UI开发的基本概念和开发步骤,Kendo UI的示例网站为http://demos.kendoui.com/ ,包含了三个部分 Web DemoMobile DemoData ...
随机推荐
- asp.net中MVC多语言包的使用
Global.asax.cs文件 protected void Application_AcquireRequestState(object sender, EventArgs e) { if (Ht ...
- Huffman树编码-优先队列实现
Huffman编码是之前一道算法作业题,最近又要复习考试了,先把这个的代码再看一下吧. 算法原理很简单,使用优先队列将两个节点弹出,然后合并节点之后再入队列如此循环做下去即可. 主要问题在于树的修改问 ...
- 自定义UIViewController与xib文件关系深入分析
6月14日 上海 OSC 源创会开始报名啦,有很多机械键盘送哦!!! 用xcode模板向工程加入UIViewController sub class的时候,如果选中了with xib for inte ...
- JNI之HelloWorld
什么是JNI? JNI java本地开发接口 JNI 是一个协议 这个协议用来沟通java代码和外部的本地代码(c/c++). 通过这个协议,java代码就可以调用外部的c/c++代码 外部的c/c+ ...
- ubuntu学习: apt-get命令
1.apt-get update 更新软件源本地缓存文件 2.apt-cache search 查找软件包,找到想要安装的包,如 sudo apt-cache search mysql-server ...
- 【CSDN博客之星评选】我为什么坚持写博客
今天无意中在CSDN的博客之星评选活动看到自己竟然是候选人之一,真的是十分的惊讶也十分的高兴.对于喜欢写东西.喜欢分享的我来说,已经忍不住用文字来记录一下今天的美好心情,同时也让我回想起我是如何开始在 ...
- 面向对象(类,实例变量,方法定义,方法重载,构造方法,this,string类)
面向对象 类是由属性和方法组成 类是所有创建对象的模板 实例变量有默认值 实例变量至少在本类范围中有效 实例变量与局部变量冲突时,局部变量优先 类中方法定义类似于函数定义 修饰符 返回值类型 方法名( ...
- HDOJ 2680 Dijkstra
题目大意: 给你一个有向图,一个起点集合,一个终点,求最短路.... 解题思路: 1.自己多加一个超级源点,把起点集合连接到超级源点上,然后将起点与超级源点的集合的路径长度设为0,这样就称为一个n+1 ...
- android之View的启动过程
转自:http://www.cdtarena.com/gpx/201308/9607.html 程序里调用了onSizeChanged方法进行了一些设置,不知道onSizeChanged是在什么时候启 ...
- 基于visual Studio2013解决C语言竞赛题之1003字母打印
题目 解决代码及点评 ///************************************************************************/ ...