Updating knockout bindings for programatically populated inputs?

Question

I'm using a datepicker that pushes some text into an input whenever I select the date from the calendar.

I have some other instances of inputs being populated via a third-party tool too.

The problem is, I have to press some key in the input after it's populated before the re-binding happens. If I don't, then the observable doesn't update.

Similar question: knockout valueUpdate not working with Pagedown?

Is there any way to manually re-bind elements, so when I press "save" these observables can be accurately bound?

How does the datepicker update the input element? Is the datepicker element bound to a knockout observable? Can you post some code??? Thanks. — Vinney Kelly, Nov 24 '13 at 19:00
@VinneyKelly here's an example: http://jsfiddle.net/BcuLq/ this is using pagedown, but the datepicker is experiencing the same problem. If you click any of the menu buttons to alter the text, the observable doesn't update until you type something manually. — RobVious, Nov 24 '13 at 19:05

Brigand · Accepted Answer · 2014-02-10T12:57:59.340

As an example of what @ebohlman is saying,

ko.bindingHandlers.datepicker = {
    init: function (element, valueAccessor) {
        var $el = $(element), value = valueAccessor;
        $el.datepicker({ 
            value: ko.unwrap(value),
            onChange: function(newValue){
                if (ko.isObservable(value)) {
                    value(newValue);
                }
            }
        });

        if (ko.isSubscribable(value)){
            value.subscribe(function(){
                $el.datepicker("set value", ko.unwrap(value));
            });
        }
    }
}

(This is using Semantic-UI's pattern of modules, your plugin's API may vary)

I was just returning to post to submit exactly this (well, not exactly... that would be scary). KO + bindingHandlers + templates = UI Ninjutsu! — Vinney Kelly, Nov 28 '13 at 16:56

score 0 · Answer 2 · answered Nov 24 '13 at 20:15

In general you need to create a custom binding that uses whatever notification API the widget provides (though first check to see if someone else hasn't already created one). It's actually fairly easy; Knockout's creators consider writing custom bindings to be a routine aspect of using Knockout (just as Angular's creators consider writing your own directives to be a routine aspect of using it). The exact details depend on the particular widget.

The reason this is necessary is that Knockout's native bindings for input elements listen to browser events like change and keypress. However, browsers don't automatically emit events when an input element is changed programatically, so the bindings don't know that anything has happened.

Updating knockout bindings for programatically populated inputs?

2 Answers2