Ember action helper
HTML
<script src="https://github.com/downloads/emberjs/ember.js/ember-latest.js"></script>
<script type="text/x-handlebars">
{{#view App.View}}
<a href="#" {{action "edit" on="click"}}>Click me</a>
<a href="#" {{action "edit"}}>What about me?</a>
{{/view}}
<a href="#" {{action "edit" on="click" target="App.controller"}}>Click me too!</a>
</script>
JavaScript
window.App = Ember.Application.create();
App.controller = Ember.Object.create({
edit: function(event) {
alert('wowie');
console.log(event);
}
});
App.View = Ember.View.extend({
edit: function(event) {
alert('ohai!');
console.log(event);
}
});
// Do we want to keep track of these?
var registeredActions = {};
Ember.Handlebars.registerHelper('action', function(actionName, options) {
var hash = options.hash || {},
actionId = ++jQuery.uuid,
eventName = options.hash.on || "click",
// Do we need to worry about the specified target changing?
target = options.hash.target ? Ember.getPath(options.hash.target) : this,
ret = [];
var handler = registeredActions[actionId] = function(event) {
target[actionName](event);
};
// FIXME: Use App's rootElement
$(document.body).delegate('[data-ember-action=' + actionId + ']', eventName, handler);
ret.push('data-ember-action="' + actionId + '"');
return new Ember.Handlebars.SafeString(ret.join(' '));
});