如何确定Ember.js在何处呈现？

Question

我有一个用Ember.js创建的应用程序。html有脚本标记。我希望将纯HTML放在Ember.js呈现的内容下面。但当我把它放在下面像这样：

<script type="text/x-handlebars">
</script>
<div>my super div</div>

超级div位于ember.js内容之上。怎样做才能使其低于ember.js内容呢？

Answer 1

app/templates/application.hbs文件是Ember的主模板文件。{{outlet}}允许在该模板中呈现任何路由模板。您可以将<div>放在{{outlet}}下面，以使application.hbs文件呈现出来：

<h1>tomaszs's app</h1>
  {{outlet}}
<div>my super div</div>

这样，您的<div>将出现在“下面”的Ember内容(这是通过{{outlet}}呈现的)。

Answer 2

为了做到这一点，您需要将div放在父模板的{{outlet}}下面。例如，如果您的路由器如下所示：

Router.map(function() {
  this.route('posts', function() {
    this.route('new');
  });
});

要在posts/new模板中使用这个功能，就需要将div标记放在posts模板的{{outlet}}下面。

Answer 3

您需要在html中创建一个id为"foo“的div，然后在您的rootElement配置中，使用rootElement (rootElement)，您的余烬应用程序将始终呈现到该div中。现在，在静态html中，它将尊重源排序。