您的位置：首页 > 产品设计 > UI/UE

Kendo UI开发教程(13): Kendo MVVM 数据绑定(二) Checked

2014-01-21 09:11 435 查看

Checked绑定用在checkbox ()或 radio button ()上。

注意：checked绑定只适用于支持checked的DOM元素，其它DOM元素的值可以使用value绑定。

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

例如：

1	<input type= "checkbox" data-bind= "checked: isChecked" />

<script>

3	var viewModel = kendo.observable({

4	isChecked: false

});

7	kendo.bind($( "input" ), viewModel);

</script>

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

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

1	< input type = "checkbox" value = "Red" data-bind = "checked: colors" />Red

2	< input type = "checkbox" value = "Green" data-bind = "checked: colors" />Green

3	< input type = "checkbox" value = "Blue" data-bind = "checked: colors" />Blue

4	< script >

5	var viewModel = kendo.observable({

6	colors: ["Red"]

});

9	kendo.bind($("input"), viewModel);

10	</ script >

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

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

1	< input type = "radio" value = "Red" name = "color" data-bind = "checked: selectedColor" />Red

2	< input type = "radio" value = "Green" name = "color" data-bind = "checked: selectedColor" />Green

3	< input type = "radio" value = "Blue" name = "color" data-bind = "checked: selectedColor" />Blue

4	< script >

5	var viewModel = kendo.observable({

6	selectedColor: "Green"

});

9	kendo.bind($("input"), viewModel);

10	</ script >

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航