CODEWITHSUNDEEP
jquerycheckboxknockout.jscustom-binding
gdefilippi
gdefilippi

Reputation: 35

Knockout checked binding

So I'm trying to use a custom knockout checkbox binding to trigger visibility on some divs in a form. I'm having a difficult time figuring out why it won't work correctly. I've gotten it to the point where the initial value gets set, but then it won't reupdate. My problem is I don't seem to be able to bind the checkbox correctly.

I've got a fiddle to help this make more sense. When it loads it sets the correct values, but then subsequent clicking doesn't do anything.

I'm stumped I've looked at it for too long.

var data = true;

ko.bindingHandlers.aipchecked = {
    update: function(element, valueAccessor) {
        var options = valueAccessor();
        alert(options.value());
        if (options.value()) {
                    $(options.checked).slideDown('fast', function () { });
                    $(options.unchecked).slideUp('fast', function () { });
        } else {
                    $(options.checked).slideUp('fast', function () { });
                    $(options.unchecked).slideDown('fast', function () { });
        }
        options.value(options.value())
        //ko.bindingHandlers.checked.update(element, options.value);
      } 
};

var viewModel = {
    control:[
        {   
            checked: '#one',
            unchecked: '',
            value: ko.observable(true)
       }    
    ]
};
viewModel.control[0].value(data);
ko.applyBindings(viewModel);

The HTML

    <div data-bind="foreach: control">
<input type="checkbox" data-bind="aipchecked:{value: value,checked:checked,unchecked:unchecked}" />
    <label data-bind="text: value"></label>
</div>
    <div id="one">testing</div>

http://jsfiddle.net/gdefilippi/SuAYR/8/

V/R, Geoffrey

Upvotes: 3

Views: 960

Answers (1)

Vivek Srivastava
Vivek Srivastava

Reputation: 569

Two things which are going in your code are below -

  1. Use 'checked' binding instead of 'value' binding in HTML, as the check event changes the state of the checkbox.

    <div data-bind="foreach: control">
    <input type="checkbox" data-bind="checked:value,aipchecked:{value: value,checked:checked,unchecked:unchecked}" />
    <label data-bind="text: value"></label>
</div>
<div id="one">testing</div>

  2. Remove the checked update binding from JS code.

    var data = true;

ko.bindingHandlers.aipchecked = {
    update: function(element, valueAccessor) {
    var options = valueAccessor();
    alert(options.value());
    if (options.value()) {
            $(options.checked).slideDown('fast', function () { });
            $(options.unchecked).slideUp('fast', function () { });
    } else {
            $(options.checked).slideUp('fast', function () { });
            $(options.unchecked).slideDown('fast', function () { });
    }
    //ko.bindingHandlers.checked.update(element, options.value);
    } 
};

var viewModel = {
    control:[
        {   
            checked: '#one',
            unchecked: '',
            value: ko.observable(true)
        }    
    ]
};
viewModel.control[0].value(data);
ko.applyBindings(viewModel);

Upvotes: 2

Related Questions