Kendo MVVM 数据绑定(二) Checked

Kendo MVVM 数据绑定(二) Checked

Checked 绑定用在 checkbox ()或 radio button ()上。注意: checked 绑定只适用于支持 checked 的 DOM 元素,其它 DOM 元素的值可以使用 value 绑定。

多选钮(Checkedbox) checked 绑定使用 Kendo checked 绑定到 checkbox 时,当 ViewModel 对应的值为 true, Checkbox 显示选中状态,而当用户点击 checkbox 选择状态时,对应的 ViewModel 的值也随之变化。

例如:

<input type="checkbox" data-bind="checked: isChecked" />
<script>
var viewModel = kendo.observable({
    isChecked: false
});

kendo.bind($("input"), viewModel);
</script>

本例,因为 viewModel 的 isChecked 初始值为 false,因此 Checkbox 显示未选状态,如果此时用户点击选择该选项,那么 viewModel 的 isChecked 的值为 true .

绑定一个数组到一组多选框

checked 绑定支持把 ViewModel 对象的一个数组属性绑定到一组多选框, 选择一组多选框的某个 Checkbox,它的值被添加到 ViewModel 的数组中,反之,该值从数组中移除。

<input type="checkbox" value="Red" data-bind="checked: colors" />Red
<input type="checkbox" value="Green" data-bind="checked: colors" />Green
<input type="checkbox" value="Blue" data-bind="checked: colors" />Blue
<script>
    var viewModel = kendo.observable({
        colors: ["Red"]
    });

    kendo.bind($("input"), viewModel);
</script>

在这个例子中,第一个 checkbox 显示选择状态,是因为它的 value  值 ”Red”  包含在 ViewModel 数组 colors 中, 如果此时选择 Green ,那么 colors 数组变为 Red 和 Green . 如果去除选择 Red ,则 Colors 数组只包含 Green .

单选钮(Radio Button) checked 绑定Kendo MVVM 只有在 ViewModel 的属性和对应的 radio button 的  value 值一致时才会显示该 Radio Button 为选中状态。

<input type="radio" value="Red" name="color" data-bind="checked: selectedColor" />Red
<input type="radio" value="Green" name="color" data-bind="checked: selectedColor" />Green
<input type="radio" value="Blue" name="color" data-bind="checked: selectedColor" />Blue
<script>
    var viewModel = kendo.observable({
        selectedColor: "Green"
    });

    kendo.bind($("input"), viewModel);
</script>

原文地址:https://www.cnblogs.com/miaosj/p/10362199.html

时间: 2024-08-29 23:05:59

Kendo MVVM 数据绑定(二) Checked的相关文章

Kendo MVVM 数据绑定(一) attr

Kendo MVVM 数据绑定(一) attr Kendo UI MVVM 数据绑定支持的绑定属性有 attr, checked, click, custom , disabled,enabled, events, html, invisible, , style, text ,value, visible ,这些属性可以绑定到 DOM 元素或是 Kendo UI 组件的属性.本篇介绍 attr 绑定.attr 支持把 ViewModel 的属性或方法绑定到 DOM 元素的某个属性, 比如设置

Kendo MVVM 数据绑定(六) Html

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 数据绑定(三) Click

Kendo MVVM 数据绑定(三) Click Click 绑定可以把由 ViewModel 定义的方法不绑定到目标 DOM 的 click 事件.当点击目标 DOM 元素时触发 ViewModel 的对应方法.例如: 使用 Click 绑定 <div id="view"> <span data-bind="click: showDescription">Show description</span> <span data

Kendo MVVM 数据绑定(九) Text

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 数据绑定(四) Disabled/Enabled

Kendo MVVM 数据绑定(四) Disabled/Enabled Disabled 和 Enabled 绑定可以根据 ViewModel 的某个属性值的 true,false 来设置 DOM 元素的 enabled 和 diabled 属性.Disabled/enabled 属性只适用于 input,select 和 textarea 元素,当这些输入元素 disabled 后,用户无法修改其值. <div id="view"> <input type=&quo

Kendo MVVM 数据绑定(五) Events

Kendo MVVM 数据绑定(五) Events 本篇和 Kendo MVVM 数据绑定(三) Click 类似,为事件绑定的一般形式.Events 绑定支持将 ViewModel 的方法绑定到 DOM 元素的事件处理(如鼠标事件).例如: <div id="view"> <span data-bind="events: { mouseover: showDescription, mouseout: hideDescription }">S

Kendo MVVM 数据绑定(八) Style

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

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 UI 数据绑定种类小结

====================autocomplete自动完成绑定 === === === $("#autocomplete").kendoAutoComplete(["Apples", "Oranges", "Grapes"]); 获取引用对象 var autocomplete = $("#autocomplete").data("kendoAutoComplete"); 该