Question

我正在尝试使用Ember.View来监听由一个可疑元素触发的事件，但是我遇到了一些麻烦。

我要做的最终结果是将可疑变更绑定到Ember对象属性。

直接使用jQuery正确绑定事件，如本答案中所示：contenteditable change events

$(function () {
  $(document).on('focus', '[contenteditable]', function(event) {
    var $this = $(this);
    console.log("$" + event.type);
    return $this;
  });
  $(document).on('blur keyup paste', '[contenteditable]', function(event) {
    var $this = $(this);
    console.log("$" + event.type);
    return $this;
  });
});

但是在Ember.View上指定的事件处理程序永远不会被调用：

App.ContentEditable = Ember.View.extend({
  item: App.Item.create({name:"Editable content"}),
  tagName: "span",
  contenteditable:"true",
  attributeBindings: ["contenteditable"],

  // Only event that gets triggered
  click: function(){ console.log("click") },

  // None of these events are triggered
  focusin: function(){ console.log("focusin") },
  focusout: function(){ console.log("focusout") },
  keyup: function(){ console.log("keyup") },
  blur: function(){ console.log("blur") },
  paste: function(){ console.log("paste") },
});

我已经整理了一个jsfiddle，显示.on()事件已记录到控制台，但Ember.View上的事件不是：http://jsfiddle.net/chrisconley/RqSn4/

Answer 1

这是因为Ember中的事件名称被转换为更像Ember的命名约定。这件事发生在packages/ember-views/lib/system/event_dispatcher.js。如您所见，您必须将现有的事件处理程序重命名为keyUp，focusIn和focusOut。

默认情况下不处理其他事件blur和paste，这就是customEvents上Ember.Application的用途，请参阅http://jsfiddle.net/pangratz666/CHVRt/

App = Ember.Application.create({
    customEvents: {
        blur: 'blur',
        paste: 'paste'
    }
});

Ember.View Contenteditable活动

1 个答案: