0

Is there a knockout way to do this?

The markup:

<div data-bind='topbinding:true'>
  <input type="checkbox" data-bind="checked:checkboxvalue_one"/>
  <input type="checkbox" data-bind="checked:checkboxvalue_two"/>
  <input type="checkbox" data-bind="checked:checkboxvalue_three"/>
</div>

These checkboxes may or may not get checked based whatever came back from the rest api.

In the ko bindings for 'topbinding' :

ko.bindingHandlers.topbinding = {
    init: function (element) {
        var $checkboxes =  $(element).find('input[type=checkbox]');
        $checkboxes.on('change', function() {
           console.log('changed');
        });
     }
}

Problem: If the rest api delivered model values - (arriving some time later during the render) updates the checkbox value it will not trigger the 'change' event. Clicking the checkbox proves the jq listener is set up fine and everything.

Any ideas ? We are trying to avoid adding a binding directly to the checkboxes - keeping it simple for others creating markup...


Edit: Not sure I have asked this very well! Having another go

Say we had some javascript set on <form> tag to look for <select>'s and re write them to some funky 'select' type looking <li>'s and hide the <select> select input, with js listening for events on the <li> to set the select value behind the scenes.

What happens when a KO viewmodel value binding for this arrives later ( say from an ajax request), and updates the <select> value - how does the js bound at the form ( that made the fake selects ) listen for the change ? -

I have been able to do this by adding the ko.bindingHandler direct the to the input, but looking for a way that I can set it top level.

11
  • 2
    Wew, I doubt you'll find an answer, at least one that'll wok "nicely", as this goes very much against what Knockout is supposed to do for you. In essence I think your question may be a duplicate of this one.
    – Jeroen
    Jun 18, 2014 at 11:34
  • for anybody else.. here's the fiddle jsfiddle.net/zy23A
    – James
    Jun 18, 2014 at 11:44
  • What is the point of the checkboxes on change method? Are you just trying to detect if at least one checkbox changes? Jun 18, 2014 at 11:49
  • Thanks Guys ! Agree @Jeroen, was expecting I was v.likely going about this in the non knockout way! Currently I am adding the binding directly to the checkbox, and so can catch the change with the ko.. update function, but would be nice to set at <form> level Jun 18, 2014 at 11:51
  • 1
    jsfiddle.net/XmPZ5 Jun 18, 2014 at 12:23

1 Answer 1

1

Based on your latest comment i believe a custom binding might solve your knockout issues.
You're right that the viewmodel is for logic & data and bindings are for ui.
If you want to make things easy for your developers because you have a complicated binding you should consider creating a custom binding rather then using the standard ones.
I usually use this for datepickers and other external components.
Code could look like this :

ko.bindingHandlers.foo= {
    init:function(element, valueAccessor, allBindingsAccessor) {
        $(element).on('change', function() {
          console.log('changed');
        });
    }
};

And your markup :

<div data-bind='topbinding:true'>
  <input type="checkbox" data-bind="foo:checkboxvalue_one"/>
  <input type="checkbox" data-bind="foo:checkboxvalue_two"/>
  <input type="checkbox" data-bind="foo:checkboxvalue_three"/>
</div>

This way whenever you update an observable with new data the init functions from your custom bindingHandler's will trigger and you have full freedom on what to do with your ui elements.
I'm not 100% sure but i think the default update mechanism will still work if you don't overwrite the update method, if it doesn't work you'll need to manually set and update the value(which again gives you great freedom to map your ui to your viewmodel observables).

2
  • Thanks @Kristoff, +1 this is what we are actually doing. We were hoping for a way to set the binding ONCE on the div element, and then someway delegate the listen for the 'change' on the inputs inside it. ( less to add on an input I guess, now and when markup may get changed later ) Jun 19, 2014 at 17:15
  • If it's really important for you i guess you could create a custom binding on the div, passing an array of observables. In the init create your inputs and manually hook up your input change events to the corresponding observable in the array.
    – Kristof
    Jun 20, 2014 at 6:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.