How can I create custom events that bubble through a view hierarchy?

Question

I have button views that are part of the helpers of the Ember.js form that I wrote. For instance. MyAddressFormView has the following template:

{{#form}} {{textArea address}} {{submitButton}} {{cancelButton}} {{/form}} 

To process the submit button, I enable the event bubble of the submit form and process it in the submit method of MyAddressFormView.

But how do I do the same for the Cancel button? For example, is it possible to somehow trigger a custom “cancel form” event in a child view, allow it to bubble up and process it in the parent view?

Answer 1

I would suggest running a special jQuery event and registering the event with the display in your Ember application. For instance:

 Ember.Application.create({ customEvents: { // key is the jquery event, value is the name used in views formcancel: 'formCancel' } }); 

And in your question cancelButton:

 click: function(evt){ Ember.$().trigger('formcancel') } 

This will bubble like other DOM Ember events displayed.

Answer 2

Ember.ActionHandler bubbles events through its "target" property. It is possible to override the Ember.View target to allow bubble events through the parent elements by default.

First enable this mix:

 (function() { Ember.View.reopen({ // Let actions bubble to parentView by default. target: function() { return this.get('parentView'); }.property('parentView') }); })(); 

Then just send the event as usual:

 tap: function() { this.send('someEvent'); }