javascript - Ember.js 动态组件

Question

我有两个模型Admin，User 我的应用程序模板如下

//application.hbs
{{outlet}}
{{header-nav}}

我想做什么（如果可能的话）进行{{header-nav}}可定制，我解释说：如果admin身份验证我想在它​​应该呈现身​​份验证{{admin-header}} 的情况下呈现组件。如何构建动态渲染的内容？user{{user-header}}application.hbs

Answer 1

isAdmin您可以在应用程序控制器中定义计算属性：

// application controller 
isAdmin: Ember.computed(function() {
  // your logic here
})

// application template
{{#if isAdmin}}
  {{admin-header}}
{{else}}
  {{user-admin}}
{{/if}}

或者您可以将其包装为header-nav具有isAdmin属性的组件，因此：

// application template
{{header-nav isAdmin=isAdmin}}

更新（@Grimmy 的 ember-simple-auth 的详细信息）

1）注入currentUser（session例如，https://stackoverflow.com/a/30894082/4950029）

currentUser2 ）解决beforeModel钩子并设置currentUser控制器属性：

//route
beforeModel: function() {
  var self = this;
  this.session.get('currentUser').then(function(user) {
    self.controllerFor( self.routeName ).set('currentUser', user);
  },function() {
    self.controllerFor( self.routeName ).set('currentUser', null);
  });
}

//controller
isAdmin: Ember.computed('currentUser.role', function() {
  return (this.get('currentUser.role') === 'admin');
}),

//template
{{#if isAdmin}}
  {{admin-header}}
{{else}}
  {{user-admin}}
{{/if}}

或如上回答

//controller
roleBasedComponentName: Ember.computed('currentUser.role', function() {
  return ((this.get('currentUser.role') === 'admin') ? 'admin-header' : 'user-header');
})

//template
{{component roleBasedComponentName user=currentUser}}

Answer 2

您可以使用{{component}}助手，但您需要首先确定组件名称，因此，在您的控制器中：

nameForComponent: Ember.computed('user.isAdmin', function()  {
// if admin return admin-header else user-header
})

然后，在您的模板中：

{{component nameForComponent}} 

它是在不久前为此类用例设计和推出的。

你也可以更花哨：

{{component (if user.isAdmin 'admin-header' 'user-header') }}