Ozerich Ozerich - 23 days ago 7
Javascript Question

Knockout: click & checked bindings in one element

I have array of limits, and checkboxes for enable/disable limits. But checkboxes do not work

jsFiddle

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());‚Äč


My 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

If you Modify your viewModel like below it will work

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 is the critical part here.

Here is a working fiddle http://jsfiddle.net/tariqulazam/WtPM9/10/

Comments