如何使用ember.js制作textarea autogrow?

时间:2013-01-22 21:40:18

标签: ember.js autogrow

如何使TextArea autogrow插件与ember.js一起使用?它似乎不适用于Ember.TextArea

我试过这个(coffeescript):

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

2 个答案:

答案 0 :(得分:7)

对于与自动增长插件不能很好地兼容的视图,Ember获取this.$()的方式似乎存在问题,导致自动增长无法正确侦听TextArea上的事件。使用视图的elementId显式创建选择器可以使您的示例正常工作。

我正在使用Ember 1.0.0-PRE.4

示例:http://jsbin.com/adedag/8/edit

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

答案 1 :(得分:6)

如果您正在使用Bower,请考虑以下替代方案: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":""
},

然后

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

});

{{view App.AutosizeTextArea value=notes}}