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 元 ...
随机推荐
- echo命令的简单用法和实例
在CentOS 6.8版本下,通过实例的形式,展现选项和参数的灵活运用,可以简明的了解echo的用法. 一.语法:echo [SHORT-OPTION]… [STRING]… :echo [选项]…[ ...
- 面向对象——final关键字
继承的弊端:打破了封装性 解决方式:final final关键字的特点: 1.final是一个修饰符,即可以修饰类,也可以修饰方法,还可以修饰变量 2.final修饰的类不可以被继承 3.final修 ...
- 34.Docker安装Mysql参数及环境变量使用
容器安装好后,通过exec进去到容器的内部, 容器安装的时候两种容器配置参数 直接在镜像的后面加配置 第二种方式 把这段代码拷贝过来.参数我们可以写在镜像的后面 我们把参数写在镜像的后面 然后我们需要 ...
- 26.OpenIdConnect获取用户信息的两种方式
openId在OAuth基础之上,在下面这红框内拿到Authorization Code之后还可以返回IdToken. IdToken和AccessToken一起返回.IdToken就会包括了用户的信 ...
- sqlserver2012——EXISTS关键字
1.返回TRUE或者FALSE 如果exists查询存在,则能查询出来 select a.* From 成绩信息 a ’) 2.判断用户登录 ) ) ' set @pwd='xxxxxxx' if e ...
- js选中select
function selected(id, val) { $('#' + id + ' option[value="' + val + '"]').attr('selected', ...
- 使用makefile编译多个文件(.c , .cpp , .h等)
有时候我们要一次运行多个文件,这时候我们可以使用Makefile!!! ◊make是什么? make是一个命令工具,是一个解释makefile中指令的命令工具.它可以简化编译过程里面所下达的指令,当执 ...
- 反向传播(BP)算法理解以及Python实现
全文参考<机器学习>-周志华中的5.3节-误差逆传播算法:整体思路一致,叙述方式有所不同: 使用如上图所示的三层网络来讲述反向传播算法: 首先需要明确一些概念, 假设数据集\(X=\{x^ ...
- c#---delegate关键字
http://www.cnblogs.com/wenjiang/archive/2013/03/12/2954913.html 注:只看红字 在C#中,delegate是一个神奇的关键字,值得拿出来单 ...
- Java 为程序创建日志系统
使用JAVA创建日志系统有两种方法 1.使用log4j操作日志文件 2.使用系统重定向输出日志信息 方法1:使用log4j操作日志文件(可使用jar或者xml) 步骤1:下载log4j.jar 下载地 ...