3

I was wondering how one might solve the following problem in Ember.js: I'm implementing a kind of a dashboard UI, filled with all different kinds of chart widgets. So, I have a list of ui-widget in my WidgetsController which I want to render on the screen.

The problem is each widget has a different template and should probably have a different controller, etc.

So I guess my question is how do you iterate over a list and render each item with a different controller/template.

Or if you can't, how would you deal with this sort of problem - rendering a list of different kinds of things?

Thanks!

Ofri
  • 474
  • 5
  • 13
  • 1
    That's a perfect use case for ember components: http://emberjs.com/guides/components/ – Oliver Jul 20 '14 at 14:37
  • I think this question is broad but solidly interesting, +1. With that being said, it could be broken down to how do I render more than one view view/controller with in a view.Maybe ember's [componets](http://emberjs.com/api/classes/Ember.Component.html) are a good place to start. – agconti Jul 20 '14 at 14:39
  • Thank you. I know about ember's components, but I don't understand how they solve this problem... I still need to somehow render a list of different kind of components, don't I? – Ofri Jul 20 '14 at 14:42
  • Or.. I can use the same component for all widgets and somehow use a different template and behavior based on the type of each.. how do I do that? – Ofri Jul 20 '14 at 14:52

2 Answers2

2

You should check out ember ContainerView.

You do not need Handlebars to invoke the creation of your Components and add them to your View. Take a look at my example here:

http://emberjs.jsbin.com/pisay/1/edit

Oliver
  • 978
  • 6
  • 17
  • That's interesting, Thanks! I'm wondering though, is there a way to make it dynamic? I mean when my list changes it won't get updated with your solution, right? – Ofri Jul 21 '14 at 07:22
  • Observe the widgetList and update the `ContainerView` if the widgetList changes. – Oliver Jul 21 '14 at 09:47
  • just wanted to put this here, as at seems to be another valid solution: http://discuss.emberjs.com/t/dynamically-render-polymorphic-component/3184/4 – Ofri Jul 21 '14 at 10:18
0

I would like to suggest an answer, and ask what you think about it.

So I can use a component for each type of widget, say WidgetOneComponent, WidgetTwoComponent and in my widgets template I will have:

{{each}}
  {{partial type}}
{{/each}}

Then, I will have a partial template for each type of widget and in it I will render the specific widget component:

_one template:

{{widget-one data=this}}

_two template:

{{widget-two data=this}}

which will work I think..

What do you say? Is there a way to avoid all those partials?

Ofri
  • 474
  • 5
  • 13
  • That seems, like a solid use case. Why would like to avoid the partials? They would keep your code DRY. – agconti Jul 20 '14 at 15:26
  • well, because they seem useless. all they do is render the right component. I think what I need is to make an handlebars helper that will render the right component for me. like in here: http://stackoverflow.com/questions/18972202/how-can-i-invoke-an-ember-component-dynamically-via-a-variable – Ofri Jul 20 '14 at 15:31
  • So you write a template just to wrap a component that probably contains another template?! – Oliver Jul 20 '14 at 15:54
  • Yes, exactly. I do this because {{partial type}} is the only (simple) way I know to choose a component based on a variable. I'm dying to hear other ideas though. – Ofri Jul 21 '14 at 06:53