KnockoutJS - checkbox應用(2)

使用foreach binding顯示多個checkbox

有時checkbox是動態產生的，如根據資料庫取得的資料來顯示對應的checkbox，這時就需要搭配foreach binding來產生checkbox。

<div data-bind="foreach: techniques">
    <label>
        <input type="checkbox" data-bind="value: value, checked: $parent.selectedTechniques" />
        <span data-bind="text: text"></span>
    </label>
</div>

<div data-bind="text: selectedTechniques().join(', ')"></div>

function ViewModel() {
    var self = this;
    self.techniques = [{
        text: "ASP.NET Web Forms",
        value: "webforms"
    }, {
        text: "ASP.NET MVC",
        value: "mvc"
    }, {
        text: "ASP.NET Web API",
        value: "webapi"
    }];

    self.selectedTechniques = ko.observableArray();
}

ko.applyBindings(new ViewModel());

techniques為陣列，可以是資料庫取出的資料，selectedTechniques則為使用者勾選的checkbox之值。在View中，selectedTechniques需透過$parent或$root取得，因為在foreach binding中的binding context與selectedTechniques的binding context不同。執行結果可參考

使用Virtual Element控制checkbox顯示文字
在前個例子中，checkbox的顯示文字是透過span標籤加上text binding達成，我們也可以透過KnockoutJS的Virtual Element以註解方式將checkobx的顯示文字加入。

使用template binding顯示多個checkbox

除了使用foreach binding外，也可以再額外搭配template binding讓checkbox可以重複使用。template內為要重複顯示的資料，div中template binding的name屬性值需與script中的id屬性值相同。如同前面的例子所述，selectedTechniques需透過$parent或$root取得，因為在foreach binding中的binding context與selectedTechniques的binding context不同。

其它應用
KnockoutJS - checkbox與textbox混搭應用 (1)
KnockoutJS - checkbox與textbox混搭應用 (2)