Render a component from a dynamic variable

1

I’d like to render a component that I will define within a variable.

I have a variable containing content like that:

page.js

Ember.Controller.extend({
   c: {
      pageTitle: 'This is the title with a component {{my-component}} and this is the end of my sentence'
   }
});

page.hbs

<div>
   {{c.pageTitle}}
</div>

The c object is populated from an API call, from a content server. I would like to provide the capability to inject components from what is defined in the content.

Basically what I need would be to render 2 times, the first time to replace my {{pageTitle}} with the string, and the second time to replace {{my-component}} with the component.

What would be the best solution to do such a thing?

Thanks

2

There is a section called conponent helper.

Hope this helps

3

Not really sure this is a great solution, can’t think of anything else off the top of my head.

http://jsbin.com/zivepecixe/1/edit?html,js,output

4

@dennismende I’m aware of the component helper but I’m not sure how I can use it in my problem.

@jasonmit Yes that’s not the best solution as I need to use the compiler… I’m trying to see if I can use this component helper instead.

5

To use the component helper, set a property (computed or otherwise) on your controller which is the dynamic name of the component to call, and call in from your template with {{component componentName}} where the first term component is calling the helper (just like {{view}} or {{partial}} ) and the componentName is the component-name of your component as set by the property.

NOTE: I haven’t dug into the component helper code, so I don’t know if there are restrictions on having hyphenated property names or not - I know the components themselves have to be but not sure about property names.

6

The issue for me is I don’t have the helper in the code, as you can see in my template. My component is defined in the string coming from a variable. Based on that, how should I use the component helper?

7

I think you need to refactor both your component and your controller a bit. What does my-component do? Cause if it just inserts a string into the title, you’re probably looking for a computed property on the controller. But if it has some type of functionality attached, you probably need to wrap that functionality into it’s own component and use {{yield}} to display it the way you want.

Wrapping content in a component

8

I really see no option to that since what you are defining is a template… and an uncompiled one.