如何在emberjs中的文本区域上监听粘贴事件

Question

我有一个包含以下模板的组件：

<div>
  {{textarea value=content autofocus="autofocus"}}
  <button {{action 'cancel'}}>cancel</button>
</div>

如何在组件的此文本区域上收听paste事件？

我试图创建粘贴动作，但这似乎不起作用：

App.EditableTextComponent = Ember.Component.extend({

  templateName: 'components/editable-text',

  actions: {
    paste: function() {
      console.log(arguments);
    }
  }

});

Answer 1

正如@ wojciech-bednarski在他的评论中建议的那样，我已将自定义事件监听器添加到我的应用程序中：

var App = Ember.Application.create({
  customEvents: {
    paste: "paste"
  }
});

然后可以在我的组件中收听它

App.EditableTextComponent = Ember.Component.extend({

  paste: function(event) {
    console.log(event)
  }

});

Answer 2

您可以尝试类似的东西，

App.EditableTextComponent = Ember.Component.extend({
  didInsertElement:function(){
    this._super();
    var self = this;
    this.$('textarea').on("paste",function(e){
      alert('you just pasted something');

/*to be more accurate when calculating the pasted value, 
you may need to get the current value of the textarea here 
and then remove it from the value retrieved inside setTimeout*/

      setTimeout(function () { 
/*the paste event is fired before the value has already been set, 
so this is handled here. 
Also mentioned here as a hacky solution, http://stackoverflow.com/questions/9494283/jquery-how-to-get-the-pasted-content*/
        alert("pasted:"+self.$('textarea').val()); 
    }, 100);
    });
  },
  templateName: 'components/editable-text'
});

http://emberjs.jsbin.com/EHejUfuj/1/edit