Come posso passare una proprietà array a un componente Ember?

Question

componente mio Ember si presenta così:

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") 
}); 

e il componente si chiama in questo modo:

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

Sembra che nulla viene stampato né posso usare qualsiasi cosa nella vista. Qualcosa non va?

Answer 1

Funziona se si dichiara come una proprietà sul controller come in:

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

E poi:

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

Nel risultato sopra leftSubDetailsnon funziona. Risulterà in undefined.

demo here

Answer 2

È inoltre possibile passare il componente di una stringa JSON e poi usare JSON.parse() nella logica di funzionamento. Una sorta di barare, ma impedisce l'aggiunta di ulteriore logica

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

Answer 3

Oppure si può controllare ember-composable-helpers

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

Answer 4

Utilizzare addon brace-componibile-aiutanti

brace-componibile-aiutanti ha una serie definito (e anche molti degli altri!). Guardate la documentazione: https://github.com/DockYard/ember-composable-helpers#array

aiuto personalizzato

È anche possibile definire un aiuto generico per la creazione tramite .hbs file. il comando Esegui

$ ember g helper arr 

E poi la chiamata hbs sarebbe:

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

Riferimento: Define array inside template for handlebars/ember?