Ember.js中的多個佈局？

Question

來自Rails背景，您可以有多個佈局 - 例如，匿名用戶頁面，然後驗證頁面。

Ember有可能嗎？

我試過在我的UsersRouter中聲明一個新的templateName，沒有用。

我還檢查了該指南：http://emberjs.com/guides/views/adding-layouts-to-views/

但它似乎並不奏效：/

Answer 1

可以使用{{render}}的if幫手內顯示不同的佈局。

例如，如果你有一個具有login和logout動作處理程序的ApplicationController，以及相應的`的loggedIn的財產。

App.ApplicationController = Ember.Controller.extend({ 
    loggedIn: false, 

    login: function() { 
    this.set('loggedIn', true); 
    }, 

    logout: function() { 
    this.set('loggedIn', false); 
    } 
}); 

您可以像這樣綁定到應用程序模板中的loggedIn屬性。

<script type='text/x-handlebars' data-template-name='application'> 
<button {{action login }}>Login</button> 
<button {{action logout }}>Logout</button> 

{{#if loggedIn}} 
    {{render 'user'}} 
{{else}} 
    {{render 'guest'}} 
{{/if}} 

</script> 

凡user和guest對應的模板。

<script type='text/x-handlebars' data-template-name='user'> 
<h1>User layout</h1> 
<div class='box user'> 
{{outlet}} 
</div> 
</script> 

<script type='text/x-handlebars' data-template-name='guest'> 
<h1>Guest layout</h1> 
<div class='box guest'> 
{{outlet}} 
</div> 
</script> 

這裏有一個工作jsbin。

編輯：要不使用基於某些靜態標準的應用程序路徑或通過model鉤子加載，您可以覆蓋ApplicationRoute的renderTemplate方法。

App.ApplicationRoute = Ember.Route.extend({ 
    renderTemplate: function() { 
    var loggedIn = false; 
    if (loggedIn) { 
     this.render('user'); 
    } else { 
     this.render('guest'); 
    } 
    } 
});