2

我正在尝试让 Ember.View 监听由 contenteditable 元素触发的事件，但遇到了一些麻烦。

我想要的最终结果是将 contenteditable 更改绑定到 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/

4

1 回答 1

2

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

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

App = Ember.Application.create({
    customEvents: {
        blur: 'blur',
        paste: 'paste'
    }
});
于 2012-04-18T16:10:40.677 回答