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/