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. 【Tomcat】本地域名访问设置

    原路径:localhost:8080/tidyko 1.去掉8080端口 打开%TOMCAT_HOME%/conf/server.xml 修改里面的 <Connector connectionT ...

  2. django集成微博内容

    登录微博 我的工具 OK. 分享sns网站的网址分享道.去上面获取代码就可. 改版后叫微博秀

  3. SMTP邮件传输协议发送邮件和附件(转)

    1.     SMTP 常用命令简介 1). SMTP 常用命令 HELO/EHLO 向服务器标识用户身份 MAIL 初始化邮件传输 mail from: RCPT 标识单个的邮件接收人:常在MAIL ...

  4. 测试css2.1选择器IE6/7/8支持情况,属性选择器/子元素/相邻

    环境 xp ie 8 , ietester <!doctype html> <html> <head> <meta charset="utf-8&q ...

  5. 使用DiskGenius对虚拟机磁盘进行压缩

    使用虚拟机的用户是否感觉到您的虚拟磁盘文件越来越大,都快把宝贵的磁盘空间(宿主机物理硬盘)占满了呢? 有人会想到,我直接启动虚拟机,然后把里面没用的数据删除了,不就行了吗?实际测试发现,这样删除后,存 ...

  6. ASP.NET MVC 5 学习教程:添加模型

    原文 ASP.NET MVC 5 学习教程:添加模型 起飞网 ASP.NET MVC 5 学习教程目录: 添加控制器 添加视图 修改视图和布局页 控制器传递数据给视图 添加模型 创建连接字符串 通过控 ...

  7. JavaDoc的生成规则---ShinePans

    使用方法: javadoc [options] [packagenames] [sourcefiles] [@files] -overview <file>          从 HTML ...

  8. java--多线程之Thread继承

    多线程,是java的特殊机制.所谓线程就是程序执行的流程.“多线程”就是可以在同一时刻能够执行多个程序块(注意,是程序块,而不是程序),这样一来就可以使得程序的执行速度大大增加. package Te ...

  9. 基于visual Studio2013解决算法导论之006最大堆排序

     题目 最大堆排序 解决代码及点评 #include <stdio.h> #include <stdlib.h> #include <malloc.h> #i ...

  10. MFC 只启动一个程序实例

    问题描述: 我们开发过程中可能会经常遇到,只启动一个程序实例.即一个程序启动之后,如果再次执行该程序,将会恢复之前打开的程序,而不是打开一个新的程序. 实现原理:利用FindWindow/FindWi ...