什么控制Ember的装载路线显示在哪里？

Question

我本以为LoadingRoute会{{outlet}}在主AppView中显示它的模板,但它看起来并不像.是什么决定了它的去向？

这是我的问题的JS Bin.加载消息未显示在我期望的位置.

Answer 1

实际上,它看起来是在带有类的标记的结束标记之前插入的ember-application.您可以outlet使用renderTemplate控制插入的内容:

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

然后将loading插座放在application模板中的任何位置:

<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>

请注意,默认插座的名称(即{{outlet}})是main.但是尝试使用默认值outlet来渲染App.LoadingView创建问题.

演示:http://jsbin.com/asizim/2/

Answer 2

假设您有以下映射：

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

何时转换为foo路线。它将插入到方法into属性中指定的模板中render。举例来说：

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

如果未设置，foo路由将检索父路由（在这种情况下为 ApplicationRoute），并将 template 插入foo到applicationtemplate 中。当您不重写该renderTemplate方法时，这是默认行为。

但是，当这些条件都没有发生时，这就是 的行为LoadingRoute，因为它没有作为ApplicationRoute父级。比 ember 将模板插入到 body 标记中，或者更具体地说，插入到App.rootElement.