Ember.js - 一个查看多个布局（登录/未登录） [英] Ember.js - one view multiple layouts (logged in/not logged in)

问题描述

在我目前的Ember项目中，我有一个认证系统。某些页面只能由经过身份验证的用户进行查看。检查用户是否被认证并且控制对页面的访问是很简单的，所以没有问题。

问题是我有某些页面是可视的，经过身份验证和未认证的用户。经过身份验证的用户可以看到与非验证用户不同的导航（顶部和侧边栏）（更多导航选项，设置等）。我想根据用户是否进行身份验证，更改使用哪个布局。问题是，我似乎只能设置一个布局的视图。

一般代码如下：

布局：

 < script type =text / x-handlebarsdata-template-name =authenticated_layout > 
 //验证布局标记
 {{yield}} 
< / script> 
 
< script type =text / x-handlebarsdata-template-name =not_authenticated_layout> 
 // not_authenticated layout mark up 
 {{yield}} 
< / script> 
  

文章模板（文章可由经过身份验证或未经身份验证的用户查看）：

 < script type =text / x-handlebarsdata-template-name =article> 
 // article mark up 
< / script> 
  

文章视图：

  App.ArticleView = Ember.View.extend（{
 templateName：article，
 layoutName：//希望这是基于身份验证状态
 //其他查看代码
}）
  

我对每个布局和呈现都有不同的视图基于用户是否被认证的视图的模板。我看到的问题是 ArticlesView 不仅仅是设置布局，而且我真的宁愿没有两个单独的视图，只有他们的

$ b

解决方案

我认为layoutName中的计算属性可以工作。

伪代码：

  App.ArticleView = Ember.View。扩展（{
 templateName：article，
 layoutName：function（）{
 //你可以使用自己的逻辑来知道用户是否被认证
 //但是如果需要，不要添加属性（dependenKey）
返回App.get（'currentUser'）？'authenticated_layout'：'not_authenticated_layout'; 
} .property（'App.currentUser'） 
}）
  

In my current Ember project I have an authentication system in place. Certain pages are view-able only by authenticated users. Checking if the user is authenticated and controlling access to a page is simple enough, so no problems there.

The issue is I have certain pages that are view-able by both authenticated and non-authenticated users. An authenticated user sees a different navigation (top and side bars) than a non-authenticated user (more navigation options, settings, etc.). I want to change which layout is used based on whether the user is authenticated or not. The problem is it seems I can only set one layout to a view.

The general code is something like the following:

Layouts:

<script type="text/x-handlebars" data-template-name="authenticated_layout">
  //authenticated layout mark up
  {{yield}}
</script>

<script type="text/x-handlebars" data-template-name="not_authenticated_layout">
  //not_authenticated layout mark up
  {{yield}}
</script>

Article Template (articles can be viewed by authenticated or non-authenticated users):

<script type="text/x-handlebars" data-template-name="article">
  //article mark up
</script>

Article View:

App.ArticleView = Ember.View.extend({
  templateName: "article",
  layoutName: //want this to be based on authentication state
  //other view code
})

I've of having a different view for each layout and rendering the template with the view based on whether the user is authenticated or not. The issue I see there is the ArticlesView does more than just set the layout, and I really would rather not have two separate views that only differ by their layoutName property.

Any advice would be greatly appreciated.

解决方案

I think that a computed property in your layoutName could work.

Pseudo code:

App.ArticleView = Ember.View.extend({
  templateName: "article",
  layoutName: function() {
    // you can use your own logic to know if the user is authenticated
    // but don't forget to add in the property(dependenKey), if needed
    return App.get('currentUser') ? 'authenticated_layout' : 'not_authenticated_layout';
  }.property('App.currentUser')
})

这篇关于Ember.js - 一个查看多个布局（登录/未登录）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！