ember.js dynamiczne elementy

Question

mam dwa modele Admin i User mój szablon aplikacji jest następująca

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

Co chcę zrobić (jeśli to możliwe), aby {{header-nav}} konfigurowalny, wyjaśniam: Jeśli Uwierzytelnianie admin Chcę renderować komponent w celu uwierzytelnienia go w przypadku, gdy powinien on być renderowany user. Jak mogę dynamicznie budować elementy do renderowania w application.hbs?

Answer 1

Można zdefiniować isAdmin komputerowej nieruchomości w kontrolerze aplikacji:

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

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

czy można owinąć go jako header-nav komponentu z isAdmin nieruchomości, więc:

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

UPDATE (szczegóły z Ember-prosty -auth for @Grimmy)

1) Wstrzykiwanie currentUser i nto session (np https://stackoverflow.com/a/30894082/4950029)

2) Rozwiąż currentUser w beforeModel haku i ustawić currentUser własność Kontroler:

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

lub odpowiedział powyżej

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

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

Answer 2

Można użyć {{component}} pomocnika, ale musisz najpierw określić nazwę komponentu, aby w kontrolerze:

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

Następnie w szablonie:

{{component nameForComponent}} 

Został on zaprojektowany i wprowadzony niedawno do takich zastosowań.

Można też przejść bardziej fantazyjne:

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