在全球范围内呈现Ember的视图

Question

我是Ember世界的新手(来自Backbone/Marionette供电的应用程序),有些事情对我来说还不太清楚.

我想在我的应用程序中渲染3个视图:侧栏,导航和带有实际内容的视图(基于我的路径).

为了做到这一点,我添加到我的应用程序tempalate 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当路由器进入路线执行钩.模板必须已在范围内才能将项目呈现在其中.话虽这么说,您可以先渲染应用程序模板,然后使用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