Event delegation for goals

Question

The following code activates my click event delegate and all three 'click' handlers in my view hierarchy.

However, I also want to run 'edit' throughout my view hierarchy. 'edit' is just the target of the element in my “child” view.

Template

<script type="text/x-handlebars"> {{#view App.GrandparentView}} {{#view App.ParentView}} {{#view App.ChildView}} <span {{action "edit" target="view"}}>Click Me</span> {{/view}} {{/view}} {{/view}} </script> 

Javascript

 App.GrandparentView = Ember.View.extend({ click: function() { console.log('Grandparent Click Fired!'); }, edit: function () { console.log('GrandParent edit fired'); } }); App.ParentView = Ember.View.extend({ click: function() { console.log('Parent Click Fired!'); }, edit: function () { console.log('Parent edit fired'); } }); App.ChildView = Ember.View.extend({ click: function() { console.log('Child Click Fired!'); }, edit: function () { console.log('Child edit fired'); } });​ 

Is it not possible to delegate target handlers in a view hierarchy? What i need dont :

 App.ChildView = Ember.View.extend({ click: function() { console.log('Child Click Fired!'); }, edit: function () { console.log('Child edit fired'); this.get('parentView').edit(); //DO NOT WANT TO DO THIS. } });​ 

Here is an example jsFiddle as an example for testing.

Answer 1

Looks like the same question you posted about a week ago. As far as I can see, such a function is not implemented in ember. The event extends to the view hierarchy, but the action name is lost and the default click handler fires.

The only workaround I found was to open the Ember.View class again and override the click handler as follows:

 Ember.View.reopen({ click: function(event){ if(event.view !== this && this[event.actionName]){ return this[event.actionName](event); } } }) 

See the fiddle here:

http://jsfiddle.net/Sly7/zZyCS/