Question

I’m having a great time playing around with knockout js and have just started to get to grips with adding custom bindingHandlers.

I’m struggling a bit with the update function of a 3rd party jqWidget gauge – I can only get it to animate the first time I update the variable. On each update after that it just sets the value directly.

I don’t fully understand ko.utils.registerEventHandler() and what it does although I’ve seen it in a bunch of other examples. Is this what is causing the animation to break? How do I know which events to register from the 3rd party widget?

For some reason this works fine if I add a jquery ui slider that is also bound to the observable.

You can test this here: set the value a few times to see that it animates the first time and not after that.

http://jsfiddle.net/LkqTU/4531/

Answer 1

When you update the input field, your observable will end up being a string. It looks like the gauge does not like to be updated with a string value, at least after the first time.

So, if you ensure that you are updating it with a number (parseInt, parseFloat, or just + depending on the situation), then it appears to update fine.

Something like:

update: function(element, valueAccessor) {
    var gaugeval = parseInt(ko.utils.unwrapObservable(valueAccessor()), 10);   
    $(element).jqxGauge('value', gaugeval || 0);
}

http://jsfiddle.net/rniemeyer/LkqTU/4532/

You would generally only register event handlers in a scenario like this to react to changes made by a user where you would want to update your view model data. For example, if there was a way for a user to click on the gauge to change the value, then you would want to handle that event and update your view model value accordingly.