Kendo MVVM 数据绑定(十一) Value
Kendo MVVM 数据绑定(十一) Value
Value 绑定可以把 ViewModel 的某个属性绑定到 DOM 元素或某个 UI 组件的 Value 属性。当用户修改 DOM 元素或 UI 组件的值时,绑定的 ViewModel 的值也随之发生改名。同样,如果 ViewModel 的值发生变化,对应的 UI 也会发生变化。注: Value 绑定只可以用在支持 Value 属性的 DOM 元素或 UI 组件。支持 Value 绑定的元素有 input,textarea 和 select, 支持value绑定的 UI 组件有 AutoComplete, DropDownlist, ComboBox, DatePicker, TimePicker,NumbericTextBox 和 Slider.如果你需要设置 DOM 元素或 UI 组件的文本或是 HTML 内容,请使用 text 和 html 绑定。对于Checkboxes () 或 radio button()请使用 checked 绑定。
Input 和 textarea Value 绑定
<div id="view">
<input data-bind="value: inputValue" />
<textarea data-bind="value: textareaValue"></textarea>
</div>
<script>
var viewModel = kendo.observable({
inputValue: "Input value",
textareaValue: "Textarea value"
}); kendo.bind($("#view"), viewModel);
</script>
上面代码当调用 bind 方法后,input 元素显示 inputValue 的值,而 textarea 显示 textareaValue 的值。 如果用户修改 input 或 textarea 的值,对应的 inputValue 和 textareaValue 也随之变化。
缺省情况下,Value 绑定依赖于 DOM 的 change 事件,也就是当 DOM 元素失去焦点时触发该事件,UI 的变化实现对 ViewModel 的更新。然而可以通过修改 data-value-update 属性来使用不同的 DOM 事件,比如 keyup 或 keypress 事件(不可使用 keydown 事件,只是因为 keydown 事件 DOM 元素的 value 尚未发生变化)。
<div id="view">
<input data-value-update="keyup" data-bind="value: inputValue" />
</div>
<script>
var viewModel = kendo.observable({
inputValue: "Input value"
}); kendo.bind($("#view"), viewModel);
</script>
Select 元素绑定 value
当 Select 元素使用了预定义的选项时,Kendo MVVM 将根据 ViewModel 的值把和 ViewModel 值相同的 option 选项设定为选中状态。
<select data-bind="value: selectedColor">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
<script>
var viewModel = kendo.observable({
selectedColor: "green"
}); kendo.bind($("select"), viewModel);
</script>
在本例中,第二个选项(Green)被选中,这是因为它的 value 和 selectedColor 相同。 UI修改选项也会更新 selectedColor 的值。 如果 option 元素没有定义 value,那么使用 option 的 text 属性。
如果 select 支持多项选择,此时对应的 ViewModel 的属性也应该为一个数组。例如:
<select data-bind="value: selectedColors" multiple="multiple">
<option>Red</option>
<option>Green</option>
<option>Blue</option>
</select>
<script>
var viewModel = kendo.observable({
selectedColors: ["Blue","Green"]
}); kendo.bind($("select"), viewModel);
</script>
Kendo MVVM 数据绑定(十一) Value的更多相关文章
- Kendo UI开发教程(22): Kendo MVVM 数据绑定(十一) Value
Value绑定可以把ViewModel的某个属性绑定到DOM元素或某个UI组件的Value属性.当用户修改DOM元素或UI组件的值时,绑定的ViewModel的值也随之发生改名.同样,如果ViewMo ...
- Kendo UI开发教程(16): Kendo MVVM 数据绑定(五) Events
本篇和Kendo UI开发教程(14): Kendo MVVM 数据绑定(三) Click类似,为事件绑定的一般形式.Events绑定支持将ViewModel的方法绑定到DOM元素的事件处理(如鼠标事 ...
- Kendo MVVM 数据绑定(十) Source
Kendo MVVM 数据绑定(十) Source Source 绑定可以把 ViewModel 的值和由 Kendo 模板定义的目标元素绑定,如果 ViewModel 的值发生变化,被绑定的目标元素 ...
- Kendo MVVM 数据绑定(九) Text
Kendo MVVM 数据绑定(九) Text Text 绑定可以使用 ViewModel 来设置 DOM 元素的文本属性,如果需要设置 input,textarea,或 select 的显示,需要使 ...
- Kendo MVVM 数据绑定(八) Style
Kendo MVVM 数据绑定(八) Style Style 绑定可以通过 ViewModel 绑定到 DOM 元素 CSS 风格属性,例如: <span data-bind="sty ...
- Kendo MVVM 数据绑定(七) Invisible/Visible
Kendo MVVM 数据绑定(七) Invisible/Visible Invisible/Visible 绑定可以根据 ViewModel 的某个属性来显示/隐藏 DOM 元素.例如: <d ...
- Kendo MVVM 数据绑定(六) Html
Kendo MVVM 数据绑定(六) Html Html 绑定可以使用 ViewMod e 的属性来设置 DOM 元素的 innerHTML 属性.如果 ViewModel 的属性的数据类型不是字符串 ...
- Kendo MVVM 数据绑定(五) Events
Kendo MVVM 数据绑定(五) Events 本篇和 Kendo MVVM 数据绑定(三) Click 类似,为事件绑定的一般形式.Events 绑定支持将 ViewModel 的方法绑定到 D ...
- Kendo MVVM 数据绑定(四) Disabled/Enabled
Kendo MVVM 数据绑定(四) Disabled/Enabled Disabled 和 Enabled 绑定可以根据 ViewModel 的某个属性值的 true,false 来设置 DOM 元 ...
随机推荐
- 微信公众平台:扫一扫demo
ylbtech-微信公众平台:扫一扫demo 1.返回顶部 1.Web.config <appSettings> <add key="appid" value=& ...
- Java中的数组和方法
3.1 数组的定义和使用 数组(Array)是用来存储一组相同数据类型数据的集合.数组中的每个数据称为一个元素(element),数组可以分为一维数组,二维数组和多维数组.我们 主要讲解一维数组和二维 ...
- openstack开发环境搭建
1 目的 让linux下的openstack代码能在windows上面实现同步开发. 2 目标 使用samba实现window与Linux的文件共享. 3 实验环境 ...
- docker添加阿里云镜像加速器
.docker添加阿里云镜像加速器 https://blog.csdn.net/chenjin_chenjin/article/details/86674521 .配置阿里云加速器 阿里云会根据账号生 ...
- [poj1811]Prime Test(Pollard-Rho大整数分解)
问题描述:素性测试兼质因子分解 解题关键:pollard-rho质因数分解,在RSA的破译中也起到了很大的作用 期望复杂度:$O({n^{\frac{1}{4}}})$ #include<cst ...
- lua调用c函数
参考:http://blog.163.com/madahah@126/blog/static/170499225201121504936823/ 1.编辑C程序 vim luac.c #include ...
- time元素 pubdate属性
time元素和pubdate属性 https://blog.csdn.net/ziy10231207/article/details/51883397
- Android Studio如何导出可供Unity使用的aar插件详解
http://www.cnblogs.com/xtqqkss/p/6387271.html 前言 项目之前使用Eclipse导出的jar文件来做与Android交互,最近因为工作需要需使用Androi ...
- 2017-9-13 NOIP模拟赛[xxy]
全排列 (permutation.cpp/c/pas)Description从 n 个不同元素中任取 m(m≤n)个元素,按照一定的顺序排列起来,叫做从 n个不同元素中取出 m 个元素的一个排列.当 ...
- 【TIDB】3、数据库的发展历史、现在、未来
1.从单机数据库说起(Mysql.Oracle.PostgreSQL) 关系型数据库起源自1970年代,其最基本的功能有两个: 把数据存下来: 满足用户对数据的计算需求. 第一点是最基本的要求,如果一 ...