Ember.js Render Components Dynamically

Quang Nguyen
Sep 3, 2018 · 1 min read

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.

quangtn0018

Just my findings and techniques that I’ve learned from working and doing side projects on all things software engineering related

Quang Nguyen

Written by

Software Engineer

quangtn0018

Just my findings and techniques that I’ve learned from working and doing side projects on all things software engineering related

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade