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

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

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

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

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

2) 在beforeModel钩子中解析currentUser并设置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') }}