Reputation: 1062
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
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