使用Handlebars从动态变量渲染组件

Question

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}}'
   }
});

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

Answer 1

You could render the component using the new {{component}} helper (in the latest version of Ember)

{{component 'my-component'}}

{{component c.myPageTitleComponent}}

For the text to be present, you could do two things:

In your Template

You could implement the text directly in your template

{{c.myPageTitleText}} {{component c.myPageTitleComponent}}

Using a Parent Component

You could implement a parent component:

{{my-parent-component text=c.myPageTitleText componentName=c.myPageTitleComponent}}

Then in 'my-parent-component', it would look like this:

{{text}} {{component componentName}}

This doesn't really make sense though unless you needed some custom logic in my-parent-component.