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 方法,这两种方法…

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…

本篇和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…