Question

I am writing a custom binding to use $.expandingTextarea with Knockout.js.

Following the excellent article Another Look at Custom Bindings for KnockoutJS, I hoped it would be as simple as:

ko.bindingHandlers.expandingTextarea = {
  init: function(element, valueAccessor) {
    $(element).expandingTextarea();
  },
   update: function(element, valueAccessor, aBA, vm) {
    ko.bindingHandlers.value.update(element, valueAccessor, aBA, vm);
    $(element).expandingTextarea("resize");
  }
}

Unfortunately this does not work as expected – i.e. when changes are made to the textarea, the corresponding view model is not updated. Here’s a jsFiddle that illustrates the problem.

How does one create a KO custom binding for the expandingTextarea plugin?

Answer 1

Here is the solution on jsFiddle, namely also adding the value binding’s init (which has the code to capture the events specified by the valueUpdate parameter):

ko.bindingHandlers.expandingTextarea = {
    init: function(element, valueAccessor, aBA, vm) {
        $(element).expandingTextarea();
        ko.bindingHandlers.value.init(element, valueAccessor, aBA, vm);
    },
    update: function(element, valueAccessor, aBA, vm) {
        ko.bindingHandlers.value.update(element, valueAccessor, aBA, vm);
        $(element).expandingTextarea("resize");
    }
};

I hope this helps someone else! 🙂