Ember.js中有多个布局? [英] Multiple Layouts in Ember.js?
问题描述
来自Rails背景,您可以有多个布局 - 例如匿名用户页面,然后验证页面。
Ember可以使用这种方式吗?
我已经尝试在我的UsersRouter中声明一个新的templateName,没有用。
我还查了本指南: http://emberjs.com/guides/views/adding-layouts-to / /> 但似乎没有工作:/ 如果帮助器可以使用 例如,如果您有一个 您可以绑定到 其中 这是一个工作 jsbin 。 编辑:根据某些静态条件不使用应用路由或通过 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 For instance if you have an The you can bind to the Where Here's a working jsbin. Edit: To not use the application route based on some static criteria or loaded via
这篇关于Ember.js中有多个布局?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
内的
{{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>
模型加载
钩子,您可以覆盖 ApplicationRoute
的 renderTemplate
方法。
App.ApplicationRoute = Ember.Route.extend({
renderTemplate:function(){
var loggedIn = false;
if(loggedIn){
this.render('user');
} else {
this.render('guest');
}
}
});
{{render}}
inside an if
helper to show different layouts. 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);
}
});
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>
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>
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');
}
}
});