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?

does it work normally if you don't have the autogrow on it? also, change your binding for the event from change: ViewModel.vmAreaProcess.SetAreaRevision($data) to change: ViewModel.vmAreaProcess.SetAreaRevision you don't need to pass in $data, that will immediately execute the function — Sujesh Arukil
@SujeshArukil Hi, yes it works as expected when I remove the autogrow part — Armand
what are you trying to get from the change event? the value inside the textarea being passed to a function? — Sujesh Arukil
jsfiddle.net/sujesharukil/3p9bj/17 this seems to be working fine. All I did was remove the ($data) from the change event. — Sujesh Arukil

Sujesh Arukil Sujesh Arukil · Accepted Answer · 2013-04-18T13:52:07

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?

knockout autogrow binding removes change event binding

1 Answers