Ember.js Render Components Dynamically
This is a very powerful tool in Ember.Ember.js — Components: Defining a Component
Often times, your components will just encapsulate certain snippets of Handlebars templates that you find yourself using…guides.emberjs.com
Imagine you had a bunch of components that you had to render but you don’t want to write out
// hbs{{component1}}{{component2}}{{component3}}… and so on.
What you can do is create an array of, for example, strings representing the names of the components you have created and wants to render without having to write each component out illustrated above.
// jswidgets: [ “component1”, “component2”, “component3”, “component4”,]// hbs{{#each widgets as |widget|}} {{component widget}}{{/each}}
Basically, the variable widgets will contain the string of the name of your component and the component helper will take that string and render the component as if you had written {{component1}} .
It’s important to note that when you create a component, the name of the component needs to match the string that you will place into the component helper in order to render the correct component.
You can also do things like pass in properties to that component just like you would if you had render it the normal way.

