Source绑定可以把ViewModel的值和由Kendo模板定义的目标元素绑定,如果ViewModel的值发生变化,被绑定的目标元素也随之发生变化.模板由属性data-template指定,它的值为某个script定义的模板的id.如果没有指明模板,则根据元素的标记使用缺省的模版. Source绑定到数组 当ViewModel的值 为一数组时,那么通过Source绑定到模板时,会把数组中每个元素逐个应用到模板,最后的输出为应用这些模板的结果的综合. 添加删除数组中的内容,显示的内容也随之变化.…

本篇和Kendo UI开发教程(14): Kendo MVVM 数据绑定(三) Click类似,为事件绑定的一般形式.Events绑定支持将ViewModel的方法绑定到DOM元素的事件处理(如鼠标事件).例如: 1 <div id="view"> 2     <span data-bind="events: { mouseover: showDescription, mouseout: hideDescription }">Show des…

Kendo UI Validator 支持了客户端校验的便捷方法,它基于HTML 5 的表单校验功能,支持很多内置的校验规则,同时也提供了自定义规则的便捷方法. 完整的Kendo UI 的Validator可以参见API 文档. HTML 5 表单校验 HTML5 的一项重要功能是HTML 5 表单校验属性, 通过设置限制属性为HTML输入设置输入类型,值域等,然后由浏览器来检查输入是否合法. 支持的几种规则有: 必填域 正规表达式规则 最大,最小值域 HTML 5 数据类型( 如EMail,…

Kendo 的数据源支持本地数据源(JavaScript 对象数组),或者远程数据源(XML, JSON, JSONP),支持CRUD操作(创建,读取,更新和删除操作),并支持排序,分页,过滤,分组和集合等. 准备开始 下面创建一个本地数据源. 1 var movies = [ { 2       title: "Star Wars: A New Hope", 3       year: 1977 4    }, { 5      title: "Star Wars: The…

Kendo UI 框架提供了一个易用,高性能的JavaScript模板引擎.通过模板可以创建一个HTML片段然后可以和JavaScript数据合并成最终的HTML元素. Kendo 模板侧重于UI显示,支持关键的模板功能,着重于性能而不是语法上的方便. 模板语法 Kendo 模板使用了一种称为“#”的语法形式,使用这种语法,#用来表明模板中的某个部分可以使用JavaScript数据来替代. 用三种方式使用#语法: 显示字面量 #=# 显示HTML元素 #:# 执行任意的Javascript代码…

Kendo UI Fx 提供了一个丰富,可扩展,性能经过优化的工具集合用来完成HTML元素的过渡显示.每种特效近可能的使用CSS Transition ,对于一些老版本浏览器使用修改属性的方法作为补充.所有动画可以反向显示从而可以方便的实现元素的显示和隐藏. 本篇介绍了Kendo UI特效的概要,完整的文档可以参考API文档 准备开始 所有Kendo UI 特效都是通过kendo.fx JQuery 选择器封装来创建,每个封装支持显示多种特效.例如: 1 <div id="foo"…

Value绑定可以把ViewModel的某个属性绑定到DOM元素或某个UI组件的Value属性.当用户修改DOM元素或UI组件的值时,绑定的ViewModel的值也随之发生改名.同样,如果ViewModel的值发生变化,对应的UI也会发生变化.注:Value绑定只可以用在支持Value属性的DOM元素或UI组件.支持Value绑定的元素有input,textarea和select, 支持value绑定的UI组件有AutoComplete, DropDownlist, ComboBox, Date…

Click绑定可以把由ViewModel定义的方法不绑定到目标DOM的click事件.当点击目标DOM元素时触发ViewModel的对应方法.例如: 使用Click绑定 1 <div id="view"> 2     <span data-bind="click: showDescription">Show description</span> 3     <span data-bind="visible: isD…

Text绑定可以使用ViewModel来设置DOM元素的文本属性,如果需要设置input,textarea,或select的显示,需要使用value属性. 1 <span data-bind="text: name"></span> 2 <script> 3 var viewModel = kendo.observable({ 4     name: "John Doe" 5 }); 6   7 kendo.bind($(&quo…

前面基本介绍完Kendo UI开发的基本概念和开发步骤,Kendo UI的示例网站为http://demos.kendoui.com/ ,包含了三个部分 Web DemoMobile DemoDataViz Demo 主要提供了每个部分UI组件的具体用法,比如Web Demos 包含了下面 Mobile Demo 包含下面示例: DataViz Deom 包含下面示例: 在正式开发Kendo Web应用前,需要把每个例子一一过一遍,对Kendo提供的UI组件的功能有个大概的了解,再看看本系列教程…