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

Kendo UI MVVM中checkbox和radiobutton的checked绑定实践

最新推荐文章于 2024-01-03 14:29:35 发布

原创最新推荐文章于 2024-01-03 14:29:35 发布 · 6.8k 阅读

0 ·

CC 4.0 BY-SA版权

教程同时被 3 个专栏收录

666 篇文章

订阅专栏

Kendo

27 篇文章

订阅专栏

Kendo 开发教程

27 篇文章

订阅专栏

本文深入探讨了Kendo UI MVVM中如何使用checked绑定来操控checkbox和radiobutton的状态，包括多选框的数组绑定和单选框的值匹配逻辑。通过实例代码演示了如何在视图模型中设置和响应这些控件的状态变化。

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

多选钮(Checkedbox） checked绑定

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

例如：

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

    2<script>

    3var viewModel = kendo.observable({

    4    isChecked: false

    5});

    6 

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

    8</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"]

    7    });

    8 

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

    10</script>

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

单选钮(Radio Button） checked绑定

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"

    7    });

    8 

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

    10</script>