Ember.View Contenteditable events

Question

I'm trying to get an Ember.View to listen to events triggered by a contenteditable element, but am having a little trouble.

The end result I'm going for is to have the contenteditable changes bound to an Ember Object property.

Events are correctly bound using jQuery directly as given in this answer: 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;
  });
});

But event handlers that specified on the Ember.View never get called:

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") },
});

I've put together a jsfiddle showing that the .on() events are logged to the console but the events on the Ember.View are not: http://jsfiddle.net/chrisconley/RqSn4/

score 2 · Accepted Answer · answered Apr 18 '12 at 16:10

2

That's because the event names in Ember are translated to a more Ember-like naming convention. This stuff happens in packages/ember-views/lib/system/event_dispatcher.js. As you can see, you have to rename your existing event handlers into keyUp, focusIn and focusOut.

The other events blur and paste are not handled by default, thats what customEvents on Ember.Application is for, see http://jsfiddle.net/pangratz666/CHVRt/

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

answered Apr 18 '12 at 16:10

pangratz

15,875
7
50
75

Thanks so much - figured it was something silly. And thanks for the tip about customEvents! – Chris Conley Apr 18 '12 at 16:37
Glad I could help. I haven't found a documentation about this naming-translation on emberjs.com so I guess this should be fixed. – pangratz Apr 18 '12 at 16:39

Ember.View Contenteditable events

1 Answers1