Knockout.Js官网学习（checked 绑定）

时间 2019-12-02 标签 knockout.js knockout js 官网学习 checked 绑定

前言javascript

checked绑定是关联到checkable的form表单控件到view model上 - 例如checkbox（<input type='checkbox'>）或者radio button（<input type='radio'>）。当用户check关联的form表单控件的时候，view model对应的值也会自动更新，相反，若是view model的值改变了，那控件元素的check/uncheck状态也会跟着改变。java

注：对text box，drop-down list和全部non-checkable的form表单控件，用value绑定来读取和写入是该元素的值，而不是checked绑定。数组

简单示例app

示例代码spa

<p>Send me spam:<input type="checkbox" data-bind="checked:wantsSpam" /></p>
<script type="text/javascript" src="~/Scripts/knockout-2.3.0.debug.js"></script>   
<script type="text/javascript">
    var viewModel = {
        wantsSpam:ko.observable(true)
    };

    viewModel.wantsSpam(false);
    ko.applyBindings(viewModel);
</script>

运行以后debug

对于checkbox，当参数为true的时候，KO会设置元素的状态为checked，反正设置为unchecked。若是你传的参数不是布尔值，那KO将会解析成布尔值。也就是说非0值和非null对象，非空字符串将被解析成true，其它值都被解析成false。code

当用户check或者uncheck这个checkbox的时候，KO会将view model的属性值相应地设置为true或者false。orm

Checkbox关联到数组对象

<p>Send me spam:<input type="checkbox" data-bind="checked:wantsSpam" /></p>
<div data-bind="visible: wantsSpam">
    Preferred flavors of spam:    
    <div>
        <input type="checkbox" value="cherry" data-bind="checked: spamFlavors"/> Cherry
    </div>    
    <div>
        <input type="checkbox" value="almond" data-bind="checked: spamFlavors"/> Almond
    </div>
    <div>
        <input type="checkbox" value="msg" data-bind="checked: spamFlavors"/> Monosodium Glutamate
    </div>
</div>
<script type="text/javascript" src="~/Scripts/knockout-2.3.0.debug.js"></script>   
<script type="text/javascript">
    var viewModel = {
        wantsSpam: ko.observable(true),
        spamFlavors: ko.observableArray(["cherry", "almond"])
    };
    ko.applyBindings(viewModel);
    viewModel.wantsSpam(false);
    viewModel.spamFlavors.push("msg");
</script

添加radio buttonblog

    <div><input type="radio" name="flavorGroup" value="cherry" data-bind="checked: spamFlavor"/> Cherry</div> 
    <div><input type="radio" name="flavorGroup" value="almond" data-bind="checked: spamFlavor"/> Almond</div> 
    <div><input type="radio" name="flavorGroup" value="msg" data-bind="checked: spamFlavor"/> Monosodium Glutamate</div>

spamFlavor:ko.observable("cherry")

对于radio buttons，KO只有当参数值等于radio button value属性值的时候才设置元素为checked状态。因此参数应是字符串。在上面的例子里只有当view model 的spamFlavor 属性等于“almond”的时候，该radio button才会设置为checked。

固然，最有用的是设置一组radio button元素对应到一个单个的view model 属性。确保一次只能选择一个radio button须要将他们的name属性名都设置成同样的值（例如上个例子的flavorGroup值）。这样的话，一次就只能选择一个了。

若是参数是监控属性observable的，那元素的checked状态将根据参数值的变化而更新，若是不是，那元素的value值将只设置一次而且之后不在更新。