How to make textarea autogrow using ember.js?

Question

How can I make the TextArea autogrow plugin work with ember.js? It does not seem to work with Ember.TextArea.

I tried this (coffeescript):

  App.TextField = Ember.TextArea.extend
    didInsertElement: ->
      opts =
        animate: false
        cloneClass: 'faketextarea'
      @$().autogrow(opts)

Answer 1

There seems to be an issue with the way Ember gets this.$() for the view that doesn't play nicely with the autogrow plugin, causing autogrow to not correctly listen for events on the TextArea. Explicitly creating the selector using the elementId of the view allows your example to work.

I'm using Ember 1.0.0-PRE.4

Example: http://jsbin.com/adedag/8/edit

App.TextField = Ember.TextArea.extend({
  didInsertElement: function() {
    opts = {
      animate: false,
      cloneClass: 'faketextarea'
    }
    $('#'+this.get('elementId')).autogrow(opts);
  }
});

Answer 2

If you are using Bower, consider this alternative also: http://www.jacklmoore.com/autosize/

"dependencies": {
    "jquery": "~2.0",
    "ember": "1.2.0-beta.4",
    "ember-data-shim": "v1.0.0-beta.3",
    "handlebars": "1.1.2",
    "jquery-autosize":""
},

Then

App.AutosizeTextArea = Ember.TextArea.extend({
didInsertElement: function() {
    $('#'+this.get('elementId')).autosize();
}

});

And

{{view App.AutosizeTextArea value=notes}}