8

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

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

4

4 回答 4

5

实际上，它看起来是在带有 class 的标签的结束标签之前插入的ember-application。您可以使用renderTemplateoutlet控制将其插入到哪个位置：

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/aizim/2/

于 2013-07-24T15:31:04.997 回答
3

假设你有这个映射：

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，因为它没有ApplicationRouteas 父级。比 ember 在 body 标记中插入模板，或者更具体地说，在App.rootElement.

于 2013-07-25T01:48:07.993 回答
1

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

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

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

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

于 2013-07-24T15:30:27.097 回答
0

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

App.LoadingRoute = Ember.Route.extend({
    renderTemplate: function() {
        this.render("application");
        this.render("loading", { outlet: "loading", into: "application" });
    }
});
于 2013-08-13T22:57:20.667 回答