Dynamically choosing which component to use?

1

I’m building a widget dashboard app. There’s a single model that contains the data that the widget can display, but I’m organizing my components to align with the underlying REST endpoints where the data comes from. For example:

// app/models/widget.js
export default DS.Model.extend({
    title: DS.attr('string'),
    controller: DS.attr('string'),
    action: DS.attr('string'),
    data: DS.attr() // DATA that was returned from the endpoint
});

Over on the template side I will have a bunch of components and they are responsible for rendering the data and so far I have been unable to come up with anything more elegant than:

// app/templates/component/widget.js
// app/templates/components/widgets/widget-type-1.js
// app/templates/components/widgets/widget-type-2.js
// app/templates/components/widgets/widget-type-n.js
{{#if model.isWidgetType1}}
  {{widgets.type1 model=model }}
{{else if model.isWidgetType2}}
  {{widgets.type2 model=model }}
{{ ... }
  {{widgets.typeN model=model }}
{{/if}}

Anyone have any recommendations for a better way to handle this?

2
1 Like
3

That looks like exactly what I need. Thank you.