knockout expandable/auto rows textarea

by cuhuak

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.debug.js"></script>
<textarea data-bind="value: text, valueUpdate: 'afterkeydown', autoRows: text, autoRowsMax: 10"></textarea>

<button data-bind="click: function(data, event) {console.log(ko.toJS($root, null, 2))}">View VM</button>

JavaScript

ko.bindingHandlers['autoRows'] = {
    update: function (element, valueAccessor, allBindingsAccessor) {
        var add = allBindingsAccessor().autoRowsAdd || 2;
        var min = allBindingsAccessor().autoRowsMin || 2;
        var max = allBindingsAccessor().autoRowsMax || 24;
        
        var value = ko.utils.unwrapObservable(valueAccessor());
        
        var eols = value.match(/\n/g);
        
        if (eols === null) {
            eols = min;
        }
        else {
            eols = Math.min(Math.max(eols.length+add, min), max);
        }

        $(element).attr('rows', eols)
    }
};


ViewModel = function() {
    var self = this;
    
    self.text = ko.observable("");
}

viewModel = new ViewModel;
ko.applyBindings(viewModel);