What controls where Ember's Loading Route is displayed?

Question

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

Here's a JS Bin of my problem. The Loading message isn't showing up where I expect.

Answer 1

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

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

Then place the loading outlet wherever you want 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 name of the default outlet (i.e., {{outlet}}) is main. But trying to use the default outlet for rendering the App.LoadingView creates problems.

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

Answer 2

Suppose that you have this mapping:

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

When is transitioned to foo route. It template will be inserted in that was specified in the into property of render method. By example:

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

Case this isn't setted, the foo route will retrieve the parent route, in that case ApplicationRoute, and insert the template foo, into application template. This is the default behavior when you don't override the renderTemplate method.

But when no one of that conditions happens, this is the behavior of LoadingRoute, because it doesn't have the ApplicationRoute as parent. Than ember insert the template in the body tag, or more specifically in App.rootElement.

Answer 3

If you increase the timeout you will be able to notice that loading template is attached at the end of document. It is probably designed to be used with overlays of fixed positioned elements.

You can add another outlet (called loading in example below) and force rendering of loading template into it with Route renderTemplate hook:

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

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