What controls are displayed when the Ember download route is displayed?

Question

I would think that LoadingRoute display its template in the {{outlet}} main AppView, but that doesn't look like what it does. What determines where it goes?

Here is JS Bin of my problem. The download message does not appear where I expect.

Answer 1

Suppose you have this mapping:

 App.Router.map(function() { this.route("foo") }); 

When going to route foo . This template will be inserted into the value specified in the into property of the render method. Example:

 App.FooRoute = Ember.Route.extend({ renderTemplate: function() { this.render("foo", { into: "sometemplate" }) } }); 

The case is not fixed, the route foo will look for the parent route, in this case ApplicationRoute and insert the template foo , into the application template. This is the default behavior when you do not override the renderTemplate method.

But when none of these conditions occurs, this is the LoadingRoute behavior because it does not have a ApplicationRoute parent. Than ember inserts a template into a body tag, or, more specifically, into App.rootElement .

Answer 2

Indeed, it looks like it is inserted immediately before the closing tag of the tag with the ember-application class. You can control to which outlet it is inserted with renderTemplate :

 App.LoadingRoute = Ember.Route.extend({ renderTemplate: function() { this.render('loading', { outlet: 'loading', into: 'application' }); } }); 

Then put the loading output anywhere in the application template:

 <script type="text/x-handlebars" data-template-name="application"> <div id="twenty-fifth-cdu-production"> {{#view App.Sidebar}} <div id="left-panel"> <ul> <li><a href="#one">One</a></li> <li><a href="#two">Two</a></li> <li><a href="#three">Three</a></li> </ul> </div> {{/view}} <div id="center-panel" class="container-fluid"> {{outlet}} {{outlet "loading"}} </div> </div> </script> 

Note that the default output name (ie {{outlet}} ) is main . But trying to use the default outlet to render App.LoadingView creates problems.

Demo: http://jsbin.com/asizim/2/

Answer 3

If you increase the waiting time, you may notice that the loading template is attached at the end of the document. It is probably intended for use with overlays of fixed positioned elements.

You can add another outlet (called loading in the example below) and force the conversion of the loading template to it using the renderTemplate hook route:

 App.LoadingRoute = Ember.Route.extend({ renderTemplate: function() { this.render("loading", { outlet: 'loading', into: 'application' }); } }); 

Check out this example: http://jsbin.com/ipagut/5#/#two

Answer 4

I assume this behavior is intentional, so LoadingRoute may work when ApplicationRoute itself loads. Rendering an application template manually should allow you to map to one of your outlets.

 App.LoadingRoute = Ember.Route.extend({ renderTemplate: function() { this.render("application"); this.render("loading", { outlet: "loading", into: "application" }); } });