什么控制 Ember 的加载路线显示在哪里？答案

【问题标题】：What controls where Ember's Loading Route is displayed?什么控制 Ember 的加载路线显示在哪里？
【发布时间】：2013-07-24 02:42:41
【问题描述】：

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

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

【问题讨论】：

标签： ember.js

【解决方案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/

【讨论】：

【解决方案2】：

假设你有这个映射：

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

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

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

如果未设置，foo 路由将检索父路由，在这种情况下为 ApplicationRoute，并将模板 foo 插入到 application 模板中。这是您不覆盖 renderTemplate 方法时的默认行为。

但是当没有任何一种情况发生时，这是LoadingRoute 的行为，因为它没有ApplicationRoute 作为父级。比 ember 在 body 标记中插入模板，或者更具体地说是在 App.rootElement 中插入模板。

【讨论】：

我不了解层次结构。我认为这最好地回答了我的问题 - 谢谢！
在那个问题中stackoverflow.com/questions/16476977/… 使用了多级路由映射。这创建了一种层次结构。 ApplicationRoute 是层次结构中最顶层的，它是 this.route("myroute") 映射的所有路由的父级。但目前 LoadingRoute 的行为有所不同。
谢谢！我的意思是，在您解释之前，我不了解层次结构。我现在明白了:)

【解决方案3】：

如果您增加超时时间，您将能够注意到loading 模板附加在文档末尾。它可能被设计为与固定定位元素的覆盖一起使用。

您可以添加另一个outlet（在下面的示例中称为loading）并使用Route renderTemplate钩子强制将loading模板渲染到其中：

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

看看这个例子：http://jsbin.com/ipagut/5#/#two

【讨论】：

我收到一个错误：Uncaught TypeError: Cannot call method 'connectOutlet' of undefined。不幸的是，我很难在 JsBin 中重现。有什么想法吗？
您是否在应用程序模板中创建了额外的命名 outlet？
是的。当我调用 this.render('loading'... 时，我在 ember 的代码中收到一个错误，指出父视图未定义。
路径好像还没有改变？我将您的this.render 代码包装在一个条件中：if ((this.controllerFor('application').get('currentPath')) {...。知道为什么会这样吗？

【解决方案4】：

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

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

【讨论】：

是的，我认为这是正确的。默认情况下，加载路线将其模板附加到正文。我想这就是我感到困惑的地方。在您的示例中，我认为您甚至不需要致电this.render('application')。