CODEWITHSUNDEEP
ember.jsautogrow
penkovsky
penkovsky

Reputation: 993

How to make textarea autogrow using ember.js?

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)

Upvotes: 5

Views: 1879

Answers (2)

genkilabs
genkilabs

Reputation: 2986

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

Upvotes: 6

CraigTeegarden
CraigTeegarden

Reputation: 8251

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

Upvotes: 7

Related Questions