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?

It should be `users` not `user` in the component, no? http://emberjs.jsbin.com/vuqija/1/edit?html,js,console,output — Kalman, Jan 23 '15 at 15:28
Oh yes it is users.. corrected it.. Although that does not solve this problem. — Ahmed Abbas, Jan 23 '15 at 17:11
You should add those properties to the container controller and pass them to the component — Ungue, Jan 23 '15 at 17:49
Can you duplicate your issue in the jsbin I posted above in the comments? — Kalman, Jan 23 '15 at 17:55
Console statements gives 'undefined' @KalmanHazins http://emberjs.jsbin.com/rozatekatu/1/edit?html,js,console,output — Ahmed Abbas, Jan 23 '15 at 20:01

score 6 · Accepted Answer · edited Jan 11 '16 at 22:32

6

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

edited Jan 11 '16 at 22:32

Thomas

303
3
14

answered Jan 23 '15 at 20:27

Kalman

8,001
1
27
45

2

Ideally I would want my component to be independent. Nevertheless this works. – Ahmed Abbas Jan 23 '15 at 20:34
1

I think it's important to mention, that the example with `leftSubDetails` does _not_ work. It will result in `undefined`. – vanthome May 20 '15 at 11:19

score 5 · Answer 2 · answered Aug 03 '16 at 14:19

5

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

answered Aug 03 '16 at 14:19

mpugach

591
5
15

morhook · Answer 3 · 2018-02-01T13:21:51.303

Use addon ember-composable-helpers

ember-composable-helpers has an array defined (and lot's of others too!). Look at the documentation: https://github.com/DockYard/ember-composable-helpers#array

Custom helper

You can also define a generic helper for creating via .hbs files. Run command

$ ember g helper arr

And then the hbs call would be:

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

Reference: Define array inside template for handlebars/ember?

score 0 · Answer 4 · answered Apr 23 '15 at 18:11

You can also pass the component a JSON string and then use JSON.parse() in your logic. Sort of cheating but prevents adding additional logic

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

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

4 Answers4

Use addon ember-composable-helpers

Custom helper