Kendo MVVM 数据绑定(一) attr Kendo UI MVVM 数据绑定支持的绑定属性有 attr, checked, click, custom , disabled,enabled, events, html, invisible, , style, text ,value, visible ,这些属性可以绑定到 DOM 元素或是 Kendo UI 组件的属性.本篇介绍 attr 绑定.attr 支持把 ViewModel 的属性或方法绑定到 DOM 元素的某个属性, 比如设置…

本篇和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 MVVM 数据绑定(十一) Value Value 绑定可以把 ViewModel 的某个属性绑定到 DOM 元素或某个 UI 组件的 Value 属性.当用户修改 DOM 元素或 UI 组件的值时,绑定的 ViewModel 的值也随之发生改名.同样,如果 ViewModel 的值发生变化,对应的 UI 也会发生变化.注: Value 绑定只可以用在支持 Value 属性的 DOM 元素或 UI 组件.支持 Value 绑定的元素有 input,textarea 和 select,…

Kendo MVVM 数据绑定(十) Source Source 绑定可以把 ViewModel 的值和由 Kendo 模板定义的目标元素绑定,如果 ViewModel 的值发生变化,被绑定的目标元素也随之发生变化.模板由属性 data-template 指定,它的值为某个 script 定义的模板的 id. 如果没有指明模板,则根据元素的标记使用缺省的模版. Source 绑定到数组 当 ViewModel 的值 为一数组时,那么通过 Source 绑定到模板时,会把数组中每个元素逐个应用到模…

Kendo MVVM 数据绑定(九) Text Text 绑定可以使用 ViewModel 来设置 DOM 元素的文本属性,如果需要设置 input,textarea,或 select 的显示,需要使用 value 属性. <span data-bind="text: name"></span> <script> var viewModel = kendo.observable({ name: "John Doe" }); ken…

Kendo MVVM 数据绑定(八) Style Style 绑定可以通过 ViewModel 绑定到 DOM 元素 CSS 风格属性,例如: <span data-bind="style: {color: priceColor, fontWeight: priceFontWeight},text: price"></span> <script> var viewModel = kendo.observable({ price: 42, priceC…

Kendo MVVM 数据绑定(七) Invisible/Visible Invisible/Visible 绑定可以根据 ViewModel 的某个属性来显示/隐藏 DOM 元素.例如: <div id="view"> <div data-bind="invisible: isInvisible">some content </div> <button data-bind="click: show"&g…

Kendo MVVM 数据绑定(六) Html Html 绑定可以使用 ViewMod e 的属性来设置 DOM 元素的 innerHTML 属性.如果 ViewModel 的属性的数据类型不是字符串,比如(Text, Number 或者 Date),那么会调用 toString() 方法,将这些值转为字符串.注意:如果需要设置 input,textarea 或是 select 的值,需要使用 value 绑定.例如: <span data-bind="html: name"&g…

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

Kendo MVVM 数据绑定(四) Disabled/Enabled Disabled 和 Enabled 绑定可以根据 ViewModel 的某个属性值的 true,false 来设置 DOM 元素的 enabled 和 diabled 属性.Disabled/enabled 属性只适用于 input,select 和 textarea 元素,当这些输入元素 disabled 后,用户无法修改其值. <div id="view"> <input type=&quo…

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

Kendo MVVM 数据绑定(二) Checked Checked 绑定用在 checkbox ()或 radio button ()上.注意: checked 绑定只适用于支持 checked 的 DOM 元素,其它 DOM 元素的值可以使用 value 绑定. 多选钮(Checkedbox) checked 绑定使用 Kendo checked 绑定到 checkbox 时,当 ViewModel 对应的值为 true, Checkbox 显示选中状态,而当用户点击 checkbox 选择…

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…

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

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 MVVM (一) 概述 Model View ViewModel (MVVM)  是开发人员经常使用的一种设计模式,以实现数据模型(Model)和视图(View)的分离.MVVM 中的 ViewModel 部分负责把模型中的数据对象以某种方便的形式和 View 结合起来(通常是通过数据绑定的方式). Kendo MVVM 实现了 MVVN 设计模式,并且支持和 Kendo 框架的其它部分(如UI组件和数据源)的无缝连接. 准备开始 使用 MVVM 模式首先创建 ViewModel 对…

概述 Kendo MVVM 框架关键的一个部分为 ViewModel,它主要是通过 kendo.data.ObserableObject 来提供支持的.它可以监控改变( UI 变化或是值的变化)并通知关心该变化的组件. 本篇以下 ViewModel 和  ObservableObject 代表同一对象. 为了创建一个 ObservableObject 对象,可以通过创建一个新 kendo.data.ObservableObject 实例或是使用 kendo.observable 方法,这两种方法…

示例代码:https://github.com/baiqiantao/DataBindingTest 参考:精通Android Data Binding    Android Data Binding(数据绑定)用户指南 官方教程:Data Binding Guide    API   关于 Data Binding Data Binding 解决了 Android UI 编程的一个痛点,官方原生支持 MVVM 模型可以让我们在不改变既有代码框架的前提下,非常容易地使用这些新特性. Data B…

1.  数据绑定的问题 在使用数据绑定时,一般使用 ObservableCollection<T> 类,不使用list列表集合,因为list数据发生变化时,UI界面不更新,而ObservableCollection<T> 类表示一个动态数据集合,在添加项.移除项或刷新整个列表时,此集合将提供通知(原理:在许多情况下,所使用的数据是对象的集合. 例如,数据绑定中的一个常见方案是使用 ItemsControl(如 ListBox.ListView 或 TreeView)来显示记录的集合…

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

Kendo Web UI 是个不错的Jquery框.可惜老外写的,很多都是默认的英文,当然我们也可以设置成中文,接下来,我们就看看Grid是如何实现的数据绑定(Kendo Grid数据绑定实现有很多方法我这只是一种,我觉得还比较简洁)和如何设置中文.先看看图 数据实现 <div id="grid"> </div> <script type="text/javascript"> $(function () { $.ajaxSetti…

理解javascript中的MVVM开发模式 http://blog.csdn.net/slalx/article/details/7856769 MVVM的全称是Model View ViewModel,这种架构模式最初是由微软的MartinFowler作为微软软件的展现层设计模式的规范提出,它是MVC模式的衍生物,MVVM模式的关注点在能够支持事件驱动的UI开发平台,例如HTML5,[2][3] WindowsPresentation Foundation (WPF), Silverligh…

摘要: MVVM(Model View ViewModel)是一种帮助开发者将数据从模型分离的设计模式.MVVM的ViewModel负责将数据对象从模型中分离出来,通过这种方式数据就很容易控制数据如何显示在视图上. 创建View-Model对象: 首先我们需要创建一个View-Model对象,他是控制你的数据显示在视图上. 创建对象 var viewModel = kendo.observable({ name: "John Doe", displayGreeting: functio…

Vue.js 是用于构建交互式的 Web  界面的库.它提供了 MVVM 数据绑定和一个可组合的组件系统,具有简单.灵活的 API.从技术上讲, Vue.js 集中在 MVVM 模式上的视图模型层,并通过双向数据绑定连接视图和模型.实际的 DOM 操作和输出格式被抽象出来成指令和过滤器.相比其它的 MVVM 框架,Vue.js 更容易上手. 官方网站      插件下载 HTML: <div id="demo"> {{message}} <input v-model=…

问题一.usercontrol1控件使用了mvvm数据绑定,usercontrol2也使用了mvvm数据绑定,则 以下是伪代码 <usercontrol2 datacontent="{Binding Viewmodel}"> <usercontrol1 tag="{Binding data}"> </usercontrol1> </usercontrol2> usercontrol1是不能实现数据绑定的,个人猜测原因是…

一. MVC 我们先来了解一下什么是MVC. MVC:分别所指Model.View.Controller. MVC为标准的设计模式,是官方推荐的权威的规范模式. 视图(View):用户交互界面. 控制器(Controller):调节Modle和View的交互. 模型(Model):业务逻辑模型(并非数据模型) 注意:这里大家容易误解Model,可能通常大家模型对象感觉非常的简单,就只是做数据模型,使Model的量级特别的轻,这样就加重了Controller对业务逻辑的处理,加重了Controll…

1. Kendo的继承 varPerson= kendo.Class.extend({...}); var person = new person(); var Parent = kendo.Class.extend({}); http://docs.telerik.com/kendo-ui/tutorials/inheritance-with-kendoui 2.Kendo MVVM http://docs.telerik.com/kendo-ui/getting-started/framew…

Kendo UI Grid控件的功能强大,这里将常用的一些功能总结一下. Kendo UI Grid 固定列 在使用Gird控件显示数据时,如果数据列过多,会出现横向滚动条,很多情况下,我们希望某些列固定,这些列固定显示,不随滚动条发生变化.这时,可以在数据列上使用locked属性,比如,下面是使用mvvm定义grid的示例,编辑按钮被设置为固定列: <div id="fieldgrid" class="grid" data-role="grid&q…

vuejs概述 Vue.js是用于构建交互式的Web界面的库.它提供了MVVM数据绑定和一个可组合的组件系统,具有简单.灵活的API. 结合node.js 可以实现前后端开发从物理上的分离.使前端负责View和Controller层,后端负责数据接口,数据存储. 感兴趣可以看淘宝ued <前后端分离的思考与实践> vuejs有以下几个特点 1.使用简单, 如: <body> <div id="app"> <p>{{ note }}<…