Ember.js中的多个布局？

Question

来自Rails背景,您可以拥有多个布局 - 例如,匿名用户页面,然后是经过身份验证的页面.

这与Ember有关吗？

我尝试在我的UsersRouter中声明一个新的templateName,但没有用.

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

但它似乎没有工作:/

Answer 1

You can use {{render}} inside an if helper to show different layouts.

For instance if you have an ApplicationController that has login and logout action handlers, and a corresponding `loggedIn' property.

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

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

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

The you can bind to the loggedIn property inside the application template like so.

<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 are corresponding templates.

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

Here's a working jsbin.

编辑:要不使用基于某些静态条件的应用程序路由或通过model钩子加载,您可以覆盖该renderTemplate方法ApplicationRoute.

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