javascript - 在 Ember 中全局渲染 View

Question

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

我想在我的应用程序中呈现 3 个 View :边栏、导航和具有实际内容的 View (基于我的路径)。

为了做到这一点，我在我的应用程序模板中添加了 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

如果有人告诉我如何全局(在所有页面上)呈现此模板，我将非常感激。

Answer 1

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

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

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

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

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

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