Ember.js中有多个布局？ [英] Multiple Layouts in Ember.js?

问题描述

来自Rails背景，您可以有多个布局 - 例如匿名用户页面，然后验证页面。

Ember可以使用这种方式吗？

我已经尝试在我的UsersRouter中声明一个新的templateName，没有用。

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

但似乎没有工作：/

解决方案

如果帮助器可以使用内的 {{render}} 来显示不同的布局。

例如，如果您有一个 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 ='应用'> 
< button {{action login}}>登录< / button> 
< button {{action logout}}>注销< / button> 
 
 {{#if loggedIn}} 
 {{render'user'}} 
 {{else}} 
 {{render'guest'}} 
 {{/ if}} 
 
< / script> 
  

其中用户和客人是相应的模板。

 < script type ='text / x-handlebars'data -template名= '用户' > 
< h1>用户布局< / h1> 
< div class ='box user'> 
 {{outlet}} 
< / div> 
< / script> 
 
< script type ='text / x-handlebars'data-template-name ='guest'> 
< h1>访客布局< / h1> 
< div class ='box guest'> 
 {{outlet}} 
< / div> 
< / script> 
  

这是一个工作 jsbin 。

编辑：根据某些静态条件不使用应用路由或通过模型加载钩子，您可以覆盖 ApplicationRoute 的 renderTemplate 方法。

  App.ApplicationRoute = Ember.Route.extend（{
 renderTemplate：function（）{
 var loggedIn = false; 
 if（loggedIn）{
 this.render（'user'）; 
} else {
 this.render（'guest'）; 
} 
 } 
}）; 
  

Coming from a Rails background, you can have multiple Layouts - for say, anonymous user pages and then authenticated pages.

Is this possible with Ember?

I've tried declaring a new templateName in my UsersRouter, with no avail.

I've also checked this guide: http://emberjs.com/guides/views/adding-layouts-to-views/

But it doesn't seem to be working :/

解决方案

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.

Edit: To not use the application route based on some static criteria or loaded via model hooks, you can override the renderTemplate method of the ApplicationRoute.

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

这篇关于Ember.js中有多个布局？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！