在 Ember 中全局渲染视图答案

【问题标题】：Rendering views in Ember globally在 Ember 中全局渲染视图
【发布时间】：2014-06-12 07:28:52
【问题描述】：

我是 Ember 世界的新手（来自 Backbone/Marionette 支持的应用程序），有些事情对我来说还不清楚。

我想在我的应用程序中呈现 3 个视图：侧边栏、导航和带有实际内容的视图（基于我的路径）。

为了做到这一点，我在我的应用程序模板中添加了 3 个网点：

<nav id="main_navigation">{{outlet navigation}}</nav>
<!-- some html goes here... -->
<nav id="sidebar_navigation">{{outlet sidebar}}</nav>
<section id="content">{{outlet}}</nav>

因为我想在每个页面上显示它们，所以我使用以下代码创建了 ApplicationRoute：

App.ApplicationRoute = Ember.Route.extend
  activate: ->
    @render "sidebar",
      outlet: "sidebar"
      # into "application"

当然我有侧边栏模板，但我认为它的代码在这里不相关（如果相关，我可以附上它）。不幸的是，这会导致以下错误：

 Error while loading route: Error: Assertion Failed: An outlet (sidebar) was specified but was not found.

如果我尝试注释掉 into "application"，那么我会得到：Error while loading route: TypeError: Cannot read property 'connectOutlet' of undefined

如果有人告诉我如何在全局范围内（在所有页面上）呈现此模板，我将非常感激。

【问题讨论】：

标签： javascript ember.js coffeescript

【解决方案1】：

activate 钩子在路由器进入路由时执行。模板必须已经在范围内才能将项目呈现到其中。话虽如此，您可以先渲染应用程序模板，然后使用 renderTemplate 钩子渲染导航栏/侧边栏。

App.ApplicationRoute = Ember.Route.extend({
  renderTemplate: function(){
    this.render(); // render the application template
    this.render('nav',{
                into: 'application',
      outlet: 'navigation'});
    this.render('side',{
                into: 'application',
      outlet: 'sidebar'});
  }
});

http://emberjs.jsbin.com/lemutisa/1/edit

此外，您可以在模板中使用渲染更轻松地完成这一切

<script type="text/x-handlebars">
  Appplication

  {{render 'nav'}}
  {{render 'side'}}
  <section id="content">{{outlet}}</nav>
</script>

http://emberjs.jsbin.com/lemutisa/2/edit

【讨论】：

太好了，不知道我可以直接在我的模板中使用 {{render}} 助手 - 感谢您的帮助！