Ember.js dynamic components

Question

I have two Models Admin and User My application template is as follow

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

What I want to do (if it is possible) to make {{header-nav}} customizable, I explain : If the admin authenticate I want to render the component {{admin-header}} in the case the user authenticate it should render {{user-header}}. How can I build what to render in application.hbs dynamically ?

score 3 · Answer 1 · edited May 23 '17 at 12:32

3

You could define isAdmin computed property in Application Controller:

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

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

or you could wrap it as header-nav component with isAdmin property, so:

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

UPDATE (Details with ember-simple-auth for @Grimmy)

1) Inject currentUser into session (for example, https://stackoverflow.com/a/30894082/4950029)

2) Resolve currentUser in beforeModel hook and set currentUser controller property:

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

or as answered above

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

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

edited May 23 '17 at 12:32

Community

1
1

answered Jun 16 '15 at 08:53

artych

3,669
1
17
30

Can you give me a full example of the controller please ? – Grimmy Jul 08 '15 at 09:17
1

You'd like to see something special? – artych Jul 08 '15 at 10:26
Using ember-simple-auth to authenticate, I want to get the current user.role to decide which view to render – Grimmy Jul 08 '15 at 12:36
In route, what does the "nil" mean please ? – Grimmy Jul 09 '15 at 07:45
I'm using ember-simple-auth 0.7.3, I tried your solution I got this error : "Error while processing route: index" "this.session.get(...) is undefined" "beforeModel@http://localhost:4200/, any idea ? (sorry to bother you again) – Grimmy Jul 09 '15 at 09:58
Looks like `this.session` is null. You probably don't include the `ApplicationRouteMixin` or `AuthenticatedRouteMixin` properly or something else. See https://github.com/simplabs/ember-simple-auth#the-session how to use session in routes. And why not '0.8.0' version? – artych Jul 09 '15 at 11:16
I built my app with ember-simple-auth 0.7.3 when I tried the 0.8.0 beta 2, I've got some issues, I got nothing when I try to show for example {{session.user.lastName}} in my templates – Grimmy Jul 09 '15 at 11:46
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/82817/discussion-between-artych-and-grimmy). – artych Jul 09 '15 at 12:31

score 3 · Answer 2 · edited Jun 17 '15 at 07:54

3

You may use {{component}} helper, but you need to have component name determined first, so, in your controller:

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

Then, in your template:

{{component nameForComponent}}

It was designed and introduced short time ago for such use cases.

You can also go more fancy:

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

edited Jun 17 '15 at 07:54

Patsy Issa

11,113
4
55
74

answered Jun 16 '15 at 13:08

Daniel Kmak

18,164
7
66
89

SO sorry of my late rely, i Thank you for your answer, nameForComponent in which controller should I define it please (I am new to Ember ) – Grimmy Jul 08 '15 at 09:01
1

In application controller or headernav component, depends in which template you use component helper. – Daniel Kmak Jul 08 '15 at 10:30
Ok, can you please give me an example of what should return nameForComponent, knowing that I am using Ember-simple-auth for authentication and in my user I have a role attribute which it can take either "admin" or "user" – Grimmy Jul 08 '15 at 11:08
1

`nameForComponent` should return component name - string `admin-header` or `user-header`. – Daniel Kmak Jul 08 '15 at 11:13
One last question, what would be the best approach to get the current user (role) using ember-simple-auth – Grimmy Jul 08 '15 at 12:44
I have not used this addon. – Daniel Kmak Jul 08 '15 at 14:33

Ember.js dynamic components

2 Answers2