EmberJS：不同的布局主页与应用程序

Question

我不确定这个问题的标题是最好的，但我会描述我的情况。我有一个Ember应用程序，它带有一个“主页”路线，这是着陆页，还有几个其他路线是应用程序的一部分。 Home模板不与其他模板共享任何布局，但我需要能够从Home路由转换到这些其他路线。

尝试1 - 分支应用程序模板（同一插座名称）：

<script type="text/x-handlebars"> 
    {{#if isHome}} 
     {{outlet main}} 
    {{else}} 
     {{render header}} 
     <section class="container content-wrapper main-content clear-fix" > 
      {{outlet main}} 
      {{error-dialog}} 
     </section> 
    {{/if}} 
</script> 

App.ApplicationController = Ember.Controller.extend({ 
    isHome: function(){ 
     return this.get('currentPath') == 'home'; 
    }.property('currentPath'), 
}); 

这导致了一个奇怪的臭虫从主页转换后的第一个模板渲染到别的路径将不会从DOM卸载后面的过渡。我把这归因于这样一个事实，即main outlet实例根据if语句而不同，但这只是一个猜测。

尝试2 - 分支应用程序模板（不同的出口名称）：

<script type="text/x-handlebars"> 
    {{#if isHome}} 
     {{outlet home}} 
    {{else}} 
     {{render header}} 
     <section class="container content-wrapper main-content clear-fix" > 
      {{outlet main}} 
      {{error-dialog}} 
     </section> 
    {{/if}} 
</script> 

然后我重载在HomeRouterenderTemplate将其指向主出口，但它拒绝的内容加载到插座。

尝试3 - 分支包装元素：

<script type="text/x-handlebars"> 
    {{#if isNotHome}} 
     {{render header}} 
     <section class="container content-wrapper main-content clear-fix" > 
    {{/if}} 
    {{outlet main}} 
    {{#if isNotHome}} 
     {{error-dialog}} 
     </section> 
    {{/if}} 
</script> 

这主要工作，但所产生的HTML渲染不会环绕在<section>的main outlet内容，我期望的那样。相反，它会将<section>标记视为在第一个if语句结束时打断我的CSS。

我觉得我必须在这里失去一些基本的东西。

Answer 1

所以不知何故，我必须在拨打renderTemplate时犯了一个粗心的错误。这是最后的工作。

<script type="text/x-handlebars" data-template-name="application"> 
    {{#if isHome}} 
     {{outlet home}} 
    {{else}} 
     {{render header}} 
     <section class="container content-wrapper main-content clear-fix" > 
      {{animated-outlet name="main"}} 
      {{error-dialog}} 
     </section> 
    {{/if}} 
</script> 

App.ApplicationController = Ember.Controller.extend({ 
    isHome: function(){ 
     return this.get('currentPath') == 'home'; 
    }.property('currentPath'), 
}); 

App.HomeRoute = Ember.Route.extend({ 
    renderTemplate: function(){ 
     this.render({ outlet: 'home' }); 
    } 
}); 

App.OtherRoute = Ember.Route.extend({ 
    renderTemplate: function() { 
     this.render({ outlet: 'main' }); 
    } 
}); 

Answer 2

你可以从ApplicationRoute

App.ApplicationRoute = Ember.Route.extend({ 
    renderTemplate: function() { 
    if (expression) { 
     this.render('application'); 
    } else { 
     this.render('site'); 
    } 
    } 
}); 

指定它通过http://emberjs.com/guides/routing/rendering-a-template/