knockout autogrow binding removes change event binding

Question

I have a custom binding for a jquery autogrow plugin that can be seen here Autosize knockout custom binding autosize on load

The code for reference:

ko.bindingHandlers.autogrow = {

            init: function (element, valueAccessor, allBindingsAccessor) {
                ko.applyBindingsToNode(element, { value: valueAccessor() });

                ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
                    //$(element).data('autosize').remove();
                });

                $(element).autosize({ append: "\n" });

                $(element).focus(function () {
                    $(element).trigger('autosize');
                });
            }
        };

I am using it as follows:

 <textarea id="autogrow" class="text-nm span2" data-bind="autogrow: AreaProcessName, attr: { id: 'AreaProcessName' + Id }, event: { change: ViewModel.vmAreaProcess.SetAreaRevision($data) }"></textarea>

The attr binding is still working but the event binding on change has stopped working.

Any ideas?

Answer 1

jsfiddle.net/sujesharukil/3p9bj/17 this seems to be working fine. All I did was remove the ($data) from the change event. The reason as I pointed out in my first comment is when you set something like

data-bind="event: {'someevent': func()}

what essentially is happening is, the even handler for someevent is being set as the return of func() call. Since your function ViewModel.vmAreaProcess.SetAreaRevision is not returning a handler function, it will not do a callback when the even is actually fired because the func() is executed immediately.

when you set it like this

data-bind="event: {'someevent': func}

you are actually binding 'someevent' to func handler. the func will be executed when the event is fired. Hope that clears it?