Question

我在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

如果有人告诉我如何全局渲染这些模板（在所有页面上），我会非常感激。

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

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

1 个答案: