Как передать свойство массива компоненту Ember?

Question

Мой Ember компонент выглядит следующим образом:

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

И компонент называется так:

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

Похоже, ничего не печатается и не могу использовать что-нибудь в представлении. Что-то не так?

Answer 1

Это работает, если вы объявите его как свойство на контроллере, как в:

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

И потом:

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

В результате выше leftSubDetailsне работает. Это приведет к undefined.

Работа демо here

Answer 2

Вы также можете передать компонент строку JSON, а затем использовать JSON.parse() в логике. Сортировка обмана, но не позволяет добавлять дополнительную логику

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

Answer 3

Или вы можете проверить ember-composable-helpers

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

Answer 4

Используйте аддон Ember-компонуемы-хелперов

Ember-компонуемы-хелперы имеет массив (и много других!). Посмотрите на документацию: https://github.com/DockYard/ember-composable-helpers#array

Пользовательские помощник

Вы также можете определить общий помощник для создания с помощью .hbs файлов. Команда Run

$ ember g helper arr 

И тогда вызов HBS будет:

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

Ссылка: Define array inside template for handlebars/ember?