CODEWITHSUNDEEP
javascriptember.js
Chris Conley
Chris Conley

Reputation: 1062

Ember.View Contenteditable events

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/

Upvotes: 2

Views: 1091

Answers (1)

pangratz
pangratz

Reputation: 16153

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'
    }
});

Upvotes: 2

Related Questions