Knockout custom binding update not working

Question

I am trying to add a custom binder for hasFocus to work like this

ko.bindingHandlers.hasfocus = {

//update the control when the view model changes
update: function (element, valueAccessor) {
    ko.unwrap(valueAccessor());
    alert('update');
    setTimeout(function () {
        alert(3);
        if (value
            && element.offsetWidth && element.offsetHeight
            && document.activeElement && document.activeElement != element) {
            element.focus();
            ko.utils.triggerEvent(element, "focusin"); // For IE, which doesn't reliably fire "focus" or "blur" events synchronously
        }
    });
}

};

But it never comes into this function ever. I am following this example

http://jsfiddle.net/mbest/tAGmp/

The thing is, my input field is not visible in the start. If I click some place then it gets visible. The input field looks like this

<input type="text"  data-bind="hasFocus: true" />

I was trying to make it work with hard code value true. If it works then I will change it to some observable. Any thoughts?

Answer 1

I have update the fiddle here. As you can see in your console, it is fired initially and when a value is typed in.

http://jsfiddle.net/tAGmp/11/

ko.bindingHandlers.hasfocus = {
    update: function(element, valueAccessor) {
        console.log('update');
        var value = ko.utils.unwrapObservable(valueAccessor());
        setTimeout(function() {
            if (value
                && element.offsetWidth && element.offsetHeight
                && document.activeElement && document.activeElement != element)
            {
                element.focus();
                ko.utils.triggerEvent(element, "focusin"); // For IE, which doesn't reliably fire "focus" or "blur" events synchronously
            }
        },0);
    }
};

Hopes this helps.