zoukankan      html  css  js  c++  java
  • 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>

  • 相关阅读:
    JID 2.0 RC4 发布,高性能的 Java 序列化库
    FBReaderJ 1.6.3 发布,Android 电子书阅读器
    Arquillian 1.0.3.Final 发布,单元测试框架
    JavaScript 的宏扩展 Sweet.js
    Hypertable 0.9.6.5 发布,分布式数据库
    JRuby 1.7.0 发布,默认使用 Ruby 1.9 模式
    httppp 1.4.0 发布,HTTP响应时间监控
    Redis 2.6.0 正式版发布,高性能K/V服务器
    OfficeFloor 2.5.0 发布,IoC 框架
    XWiki 4.3 首个里程碑发布
  • 原文地址:https://www.cnblogs.com/miaosj/p/10362199.html
Copyright © 2011-2022 走看看