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例如，/sf/answers/2162585771/）

2）解析currentUser钩子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}}