Ember.js 中的多种布局？

来自 Rails 背景的您可以拥有多个布局 - 例如，匿名用户页面和经过身份验证的页面。

Ember 可以做到这一点吗？

我尝试在我的 UsersRouter 中声明一个新的 templateName，但没有成功。

我还检查了本指南：http://emberjs.com/guides/views/adding-layouts-to-views/ http://emberjs.com/guides/views/adding-layouts-to-views/

但它似乎不起作用：/

您可以使用{{render}}里面一个if显示不同布局的助手。

例如，如果您有一个ApplicationController具有login and logout操作处理程序，以及相应的“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>

Where user and 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 http://jsbin.com/itolih/2/.

编辑：不使用基于某些静态标准或通过加载的应用程序路由model钩子，你可以覆盖renderTemplate的方法ApplicationRoute.

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