knockout.js textareas in a foreach using jquery plugin autoresize()

Question

How do i go about using the autoresize() with knockout?

here is a cut down version of the code i have.

<div data-bind="foreach: Rows" >
  <textarea data-bind="value: RowText" ></textarea>
</div>

I havent been able to work out how to call autoresize on each of the textareas to make them fit the text that is bound to them.

based on artems answer, the final solution is

$(document).ready(function () {
        ko.bindingHandlers.jqAutoresize = {
            update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
                $(element).autosize();
            }           
        };
}

Answer 1

You can create custom binding that will apply autoresize() to all textareas:

ko.bindingHandlers.jqAutoresize = {
    init: function(element, valueAccessor) {
        var options = ko.utils.unwrapObservable(valueAccessor()) || {};

        $(element).autoResize(options);
    }
};

Update your view:

<div data-bind="foreach: Rows" >
  <textarea data-bind="jqAutoresize: {}, value: RowText" ></textarea>
</div>