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的更多相关文章

  1. Kendo UI开发教程(22): Kendo MVVM 数据绑定(十一) Value

    Value绑定可以把ViewModel的某个属性绑定到DOM元素或某个UI组件的Value属性.当用户修改DOM元素或UI组件的值时,绑定的ViewModel的值也随之发生改名.同样,如果ViewMo ...

  2. Kendo UI开发教程(16): Kendo MVVM 数据绑定(五) Events

    本篇和Kendo UI开发教程(14): Kendo MVVM 数据绑定(三) Click类似,为事件绑定的一般形式.Events绑定支持将ViewModel的方法绑定到DOM元素的事件处理(如鼠标事 ...

  3. Kendo MVVM 数据绑定(十) Source

    Kendo MVVM 数据绑定(十) Source Source 绑定可以把 ViewModel 的值和由 Kendo 模板定义的目标元素绑定,如果 ViewModel 的值发生变化,被绑定的目标元素 ...

  4. Kendo MVVM 数据绑定(九) Text

    Kendo MVVM 数据绑定(九) Text Text 绑定可以使用 ViewModel 来设置 DOM 元素的文本属性,如果需要设置 input,textarea,或 select 的显示,需要使 ...

  5. Kendo MVVM 数据绑定(八) Style

    Kendo MVVM 数据绑定(八) Style Style 绑定可以通过 ViewModel 绑定到 DOM 元素 CSS 风格属性,例如: <span data-bind="sty ...

  6. Kendo MVVM 数据绑定(七) Invisible/Visible

    Kendo MVVM 数据绑定(七) Invisible/Visible Invisible/Visible 绑定可以根据 ViewModel 的某个属性来显示/隐藏 DOM 元素.例如: <d ...

  7. Kendo MVVM 数据绑定(六) Html

    Kendo MVVM 数据绑定(六) Html Html 绑定可以使用 ViewMod e 的属性来设置 DOM 元素的 innerHTML 属性.如果 ViewModel 的属性的数据类型不是字符串 ...

  8. Kendo MVVM 数据绑定(五) Events

    Kendo MVVM 数据绑定(五) Events 本篇和 Kendo MVVM 数据绑定(三) Click 类似,为事件绑定的一般形式.Events 绑定支持将 ViewModel 的方法绑定到 D ...

  9. Kendo MVVM 数据绑定(四) Disabled/Enabled

    Kendo MVVM 数据绑定(四) Disabled/Enabled Disabled 和 Enabled 绑定可以根据 ViewModel 的某个属性值的 true,false 来设置 DOM 元 ...

随机推荐

  1. echo命令的简单用法和实例

    在CentOS 6.8版本下,通过实例的形式,展现选项和参数的灵活运用,可以简明的了解echo的用法. 一.语法:echo [SHORT-OPTION]… [STRING]… :echo [选项]…[ ...

  2. 面向对象——final关键字

    继承的弊端:打破了封装性 解决方式:final final关键字的特点: 1.final是一个修饰符,即可以修饰类,也可以修饰方法,还可以修饰变量 2.final修饰的类不可以被继承 3.final修 ...

  3. 34.Docker安装Mysql参数及环境变量使用

    容器安装好后,通过exec进去到容器的内部, 容器安装的时候两种容器配置参数 直接在镜像的后面加配置 第二种方式 把这段代码拷贝过来.参数我们可以写在镜像的后面 我们把参数写在镜像的后面 然后我们需要 ...

  4. 26.OpenIdConnect获取用户信息的两种方式

    openId在OAuth基础之上,在下面这红框内拿到Authorization Code之后还可以返回IdToken. IdToken和AccessToken一起返回.IdToken就会包括了用户的信 ...

  5. sqlserver2012——EXISTS关键字

    1.返回TRUE或者FALSE 如果exists查询存在,则能查询出来 select a.* From 成绩信息 a ’) 2.判断用户登录 ) ) ' set @pwd='xxxxxxx' if e ...

  6. js选中select

    function selected(id, val) { $('#' + id + ' option[value="' + val + '"]').attr('selected', ...

  7. 使用makefile编译多个文件(.c , .cpp , .h等)

    有时候我们要一次运行多个文件,这时候我们可以使用Makefile!!! ◊make是什么? make是一个命令工具,是一个解释makefile中指令的命令工具.它可以简化编译过程里面所下达的指令,当执 ...

  8. 反向传播(BP)算法理解以及Python实现

    全文参考<机器学习>-周志华中的5.3节-误差逆传播算法:整体思路一致,叙述方式有所不同: 使用如上图所示的三层网络来讲述反向传播算法: 首先需要明确一些概念, 假设数据集\(X=\{x^ ...

  9. c#---delegate关键字

    http://www.cnblogs.com/wenjiang/archive/2013/03/12/2954913.html 注:只看红字 在C#中,delegate是一个神奇的关键字,值得拿出来单 ...

  10. Java 为程序创建日志系统

    使用JAVA创建日志系统有两种方法 1.使用log4j操作日志文件 2.使用系统重定向输出日志信息 方法1:使用log4j操作日志文件(可使用jar或者xml) 步骤1:下载log4j.jar 下载地 ...