javascript - ノックアウト: 1 つの要素でバインディングをクリックしてチェック

Question

制限の配列と、制限を有効/無効にするためのチェックボックスがあります。ただし、チェックボックスは機能しません

jsフィドル

function Limit(start, end)
{
    var that = this;

    this.start = start;
    this.end = end;

    this.label = ko.computed(function(){
        return that.start + ' - ' + that.end;            
    });
}

function ViewModel()
{
    var that = this;

    this.limits = [new Limit(1,2), new Limit(3,4), new Limit(4,5)];

    this.activeLimit = ko.observable(that.limits[0]);

    this.changeActiveLimit = function(limit)
    {
            that.activeLimit(limit);
    }
}

ko.applyBindings(new ViewModel());​

私のHTML

<div data-bind="foreach: {data: limits, as: 'limit'}">
 <input type="checkbox" data-bind="click: $root.changeActiveLimit, checked: limit.label == $root.activeLimit().label"/>
    <span data-bind="text: limit.label"/> 

</div>

Answer 1

以下のようにviewModelを変更すると動作します

function ViewModel()
{
    var that = this;

    this.limits = [new Limit(1,2), new Limit(3,4), new Limit(4,5)];

    this.activeLimit = ko.observable(that.limits[0]);

    this.changeActiveLimit = function(limit)
    {
            that.activeLimit(limit);
            return true;
    }
}

return trueはここで重要な部分です。

ここに作業フィドルがあります http://jsfiddle.net/tariqulazam/WtPM9/10/

Answer 2

重要なのはtrue を返すことです。クリックハンドラ関数の最後に! これにより、UI が正しく更新されます。