Wie kann ich eine Array-Eigenschaft an eine Ember-Komponente übergeben?

Question

Meine Ember Komponente sieht wie folgt aus:

import Ember from 'ember'; 

export default Ember.Component.extend({ 
    users: undefined, 
    primaryAction: 'follow', 
    leftSubDetails: [], 
    rightSubDetails: [], 

    onInitialization: function(){ 
    console.log('this', this); 
    console.log('right',this.rightSubDetails); 
    console.log('rightdetail', this.get('rightSubDetails')); 
    }.on("init") 
}); 

Und die Komponente wie folgt aufgerufen wird:

{{#view-users 
    users=model 
    primaryAction='follow' 
    leftSubDetails=['tweets', 'followers', 'following'] 
    rightSubDetails=['follow', 'reply', 'addList'] 
}} 
{{/view-users}} 

Sieht aus wie nichts gedruckt, noch kann ich etwas in der Ansicht verwenden. Ist etwas falsch?

Answer 1

Es funktioniert, wenn Sie es als eine Eigenschaft auf dem Controller wie in deklarieren:

App.IndexController = Ember.ArrayController.extend({ 
    details: ['follow', 'reply', 'addList'] 
}); 

Und dann:

{{#view-users 
    users=model 
    primaryAction='follow' 
    leftSubDetails=['tweets', 'followers', 'following'] 
    rightSubDetails=details 
}} 
{{/view-users}} 

Im Ergebnis über leftSubDetailsnicht funktioniert. Es wird undefined ergeben.

Demo Arbeiten here

Answer 2

Sie können auch die Komponente ein JSON-String übergeben und dann JSON.parse() in der Logik verwenden. Sortieren von Betrug verhindert aber das Hinzufügen zusätzlicher Logik

{{#view-users 
    users=model 
    primaryAction='follow' 
    leftSubDetails='["tweets", "followers", "following"]' 
    rightSubDetails='["follow", "reply", "addList"]' 
}} 
{{/view-users}} 

Answer 3

Oder Sie können ember-composable-helpers

{{#view-users 
    users=model 
    primaryAction='follow' 
    leftSubDetails=(w 'tweets' 'followers' 'following') 
    rightSubDetails=(w 'follow' 'reply' 'addList') 
}} 
{{/view-users}} 

Answer 4

Verwenden Addon glut-zusammensetzbare-Helfer

glut-zusammensetzbare-Helfer überprüfen eine Array definiert (und viele andere auch!). Schauen Sie sich die Dokumentation: https://github.com/DockYard/ember-composable-helpers#array

Individuelle Helfer

Sie können auch einen generischen Helfer definieren für über .hbs Dateien. Befehl Ausführen

$ ember g helper arr 

Und dann würde der hbs Anruf sein:

{{#view-users 
    users=model 
    primaryAction='follow' 
    leftSubDetails=(arr 'tweets' 'followers' 'following') 
    rightSubDetails=(arr 'follow' 'reply' 'addList') 
}} 
{{/view-users}} 

Referenz: Define array inside template for handlebars/ember?