Ember.js componenti dinamici

Question

ho due modelli Admin e User Il mio modello di applicazione è la seguente

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

Quello che voglio fare (se è possibile) per rendere {{header-nav}} personalizzabile, spiego: Se il admin autenticare Voglio rendere il componente {{admin-header}} nel caso in cui lo user autentica che deve rendere {{user-header}}. Come posso creare cosa mostrare in application.hbs in modo dinamico?

Answer 1

Si potrebbe definire isAdmin proprietà calcolata in applicazione Controller:

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

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

o si potrebbe avvolgere come header-nav componente isAdmin proprietà, quindi:

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

UPDATE (dettagli con brace-semplice -auth per @Grimmy)

1) Inietti currentUser i nto session (ad esempio, https://stackoverflow.com/a/30894082/4950029)

2) Risolvere currentUser in beforeModel gancio e impostare currentUser proprietà del controller:

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

o come risposta sopra

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

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

Answer 2

È possibile utilizzare {{component}} aiutante, ma è necessario prima determinare il nome del componente, quindi nel controller:

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

Poi, nel modello:

{{component nameForComponent}} 

E 'stato progettato ed introdotto poco tempo fa per questi casi d'uso.

Si può anche andare più fantasia:

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