How can I pass an array property to an Ember component?

Question

My Ember component looks like this:

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

And the component is called like this:

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

Looks like nothing is printed nor can I use anything in the view. Is something wrong?

Answer 1

It works if you declare it as a property on your controller as in:

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

And then:

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

In the result above leftSubDetails does not work. It will result in undefined.

Working demo here

Answer 2

Or you can check ember-composable-helpers

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