June 5, 2013

KnockoutJS - checkbox應用(1)

單一checkbox
在使用單一checkbox時,checked binding所儲存的值為true或false
<label>
    <input type="checkbox" data-bind="checked: hasChecked" />Tick me!
</label>
<div>
    hasChecked: <span data-bind="text: hasChecked"></span>
</div>
function ViewModel() {
    var self = this;
    self.hasChecked = ko.observable(false);
}

ko.applyBindings(new ViewModel());

勾選checkbox時,hasChecked屬性會被指派為true,反之為false。執行結果可參考



單一checkbox搭配顯示開關
某些情況下我們會希望當checkbox被勾選時才把資料顯示出來,例如顯示一段警告訊息或是表單資料,這時可以使用checked binding搭配visible binding來控制資料顯示與否。



多個checkbox
checked binding除了可以使用在單一一個checkbox,也可使用於多個checkbox。在多個checkbox的情形下,checked binding裡的值就不是布林而是陣列,需透過observableArray去讀取。
<label>
    <input type="checkbox" value="webforms" data-bind="checked: techniques" />ASP.NET WebForms
</label>
<label>
    <input type="checkbox" value="mvc" data-bind="checked: techniques" />ASP.NET MVC
</label>
<label>
    <input type="checkbox" value="webapi" data-bind="checked: techniques" />ASP.NET Web API
</label>
<div data-bind="text: techniques().join(', ')"></div>
function ViewModel() {
    var self = this;
    self.techniques = ko.observableArray();
}

ko.applyBindings(new ViewModel());

techniques為一observableArray,當checkbox被勾選時,checkbox之值即被寫入techniques中。執行結果可參考



如果預設要將ASP.NET WebForms及ASP.NET MVC兩個checkbox勾選,可在ViewModel裡將techniques設為ko.observableArray(["webforms", "mvc"])

延伸閱讀
KnockoutJS - checkbox應用(2)

No comments: