Knockout.Js官網學習（checked 綁定）

前言

checked綁定是關聯到checkable的form表單控件到view model上 - 例如checkbox（<input type='checkbox'>）或者radio button（<input type='radio'>） 。當用戶check關聯的form表單控件的時候，view model對應的值也會自動更新，相反，如果view model的值改變了，那控件元素的check/uncheck狀態也會跟着改變。

注：對text box，drop-down list和所有non-checkable的form表單控件，用value綁定來讀取和寫入是該元素的值，而不是checked綁定。

簡單示例

 示例代碼

<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>

運行之后

 對於checkbox，當參數為true的時候，KO會設置元素的狀態為checked，反正設置為unchecked。如果你傳的參數不是布爾值，那KO將會解析成布爾值。也就是說非0值和非null對象，非空字符串將被解析成true，其它值都被解析成false。

當用戶check或者uncheck這個checkbox的時候，KO會將view model的屬性值相應地設置為true或者false。

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 button

    <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值將只設置一次並且以后不在更新。