Question

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

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

Answer 1

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

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，并将模板foo插入application模板。当您不覆盖renderTemplate方法时，这是默认行为。

但是当没有出现任何一个条件时，这就是LoadingRoute的行为，因为它没有ApplicationRoute作为父级。比embers将模板插入body标签中，或者更具体地在App.rootElement中插入。

Answer 3

如果您增加超时，您将会注意到文档末尾附有loading模板。它可能设计用于固定定位元素的叠加。

您可以添加另一个outlet（在下面的示例中称为loading）并使用路由loading挂钩强制将renderTemplate模板呈现到其中：

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

查看此示例：http://jsbin.com/ipagut/5#/#two

Answer 4

我的猜测是这种行为是有意的，所以LoadingRoute可以在ApplicationRoute本身加载时起作用。手动渲染应用程序模板应该允许您渲染到其中一个出口。

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

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

4 个答案: