Similar concept of itemController for components?

Design
1

Hi,

I have a use case that is quite common, and I don’t know how to tackle it. I have an array of data that show growths, and data look like this:

[
    {percent: -85, trend: 'negative'},
    {percent: 65, trend: 'positive'}
]

Therefore, I created a component to display each growth (with the value, and an icon for the trend. I need a component because this is reused in a lot of different pages. I pass this array to my component as “growths” variable. My template of my component looks like this:

{{#each growth in growths}}
   {{growth.percent}}
{{/each}}

The issue is that I need to display a different icon depending on wether the trend is positive or negative:

{{#each growth in growths}}
   {{growth.percent}}
  
   {{#if growth.trend == 'positive'}}
       <i class="icon-positive"></i>
   {{else}}
       <i class="icon-negative"></i>
   {{/if}}
{{/each}}

But as this is not possible in Handlebars, I would need to use a computed property. However as I’m in the context of the compoennt, I don’t see a clean way to do that. The simplest way I’ve found is to create a new component (growth-details), that will wrap the positive or negative trend inside a computed property. But this leads to a lot of very small component.

{{#each growth in growths}}
   {{growth-details growth=growth}}
{{/each}}

Is there a better way to tackle this problem? Inside a controller, this is easy to solve thanks to itemController, but I can’t see a clean way with components only.

Thanks!

2

Is it bad to have a “very small component”? If it’s okay to have a lot of very small controllers, maybe it’s okay to have a lot of small components?

3

If possible, it might be better to change your trend property to trending: true/false. That way you don’t have to do a comparison for the if statement. Or, if you are using Ember Data you could add the computed property to your model. In the upcoming Ember 1.10, block params might help here, but I’m not super familiar with how those work.

4

The trend can also be “neutral” or “unknown” so this does not work ;). And I don’t use pure models for this part so I cannot use that.

I will have a look at block params, thanks :).

@backspace > there is nothing wrong in itself to have small components. But while I find it makes sense for controllers (having a GrowthsController and a GrowthController feels logical, especially as they may be logically grouped inside the file system). On the other hand as component are isolated, it feels a bit more strange that actually one component NEEDS to depend on another component.