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

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

本篇和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 数据绑定(十) 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…