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)

score 7 · Accepted Answer · answered Jan 23 '13 at 04:24

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);
  }
});

score 6 · Answer 2 · answered Dec 09 '13 at 17:30

6

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}}

answered Dec 09 '13 at 17:30

genkilabs

2,966
30
36

1

Nice, this one supports event triggering, which is pretty usefull since we have to deal with two-way bindings! Two others I found didn't support events, and only listen to the keyUp-event. – Tim Baas Oct 08 '15 at 16:13

How to make textarea autogrow using ember.js?

2 Answers2