Passing event from view to router


I’m trying to understand what is the proper way of rendering templates into named outlets on some event. In the app I’ve built I managed to achive this in the following manner (simplified example):

// 1. Starting from the view, send to the controller using .send()
App.IndexView = Ember.View.extend({
	click: function() {
        this.get('controller').send('process', 'Some XML data');

// 2. Using .send() again pass the action to the router
App.IndexController = Ember.Controller.extend({
	process: function(data) {
		this.send('xmlrender', data);

// 3. Now I'm able to render oultet using .render()
App.IndexRoute = Ember.Route.extend({
	events: {
		xmlrender: function(data) {
			this.get('controller').set('xml', data);
			this.render('rendered', {
				into: 'index',
				outlet: 'rendered'

Here is the demo:

This approach works fine however this 2-step .send()/send() thing seriously confuses me. I’m pretty sure there is a proper Ember-way to render an outlet as the result of the event. Thank you for your help.


You can omit the controller method, send will bubble up to the router automatically.

p.s nifty css labeling trick


This is exactly what I was looking, how could I miss it. Thank you very much @nerdyworm!