如何使用 ember.js 使 textarea 自动增长？答案

【问题标题】：How to make textarea autogrow using ember.js?如何使用 ember.js 使 textarea 自动增长？
【发布时间】：2013-01-22 21:40:18
【问题描述】：

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

我试过这个（咖啡脚本）：

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

【问题讨论】：

标签： ember.js autogrow

【解决方案1】：

Ember 获取 this.$() 的方式似乎存在问题，因为视图不能很好地与 autogrow 插件配合使用，导致 autogrow 无法正确侦听 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);
  }
});

【讨论】：

【解决方案2】：

如果您使用的是 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}}

【讨论】：

很好，这个支持事件触发，这非常有用，因为我们必须处理双向绑定！我发现另外两个不支持事件，只听keyUp-event。