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

【问题标题】：Render a component from a dynamic variable with Handlebars使用 Handlebars 从动态变量渲染组件
【发布时间】：2015-03-05 22:29:54
【问题描述】：

我想渲染一个我将在变量中定义的组件。

我有一个包含类似内容的变量：

page.js

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

page.hbs

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

c 对象由 API 调用、内容服务器填充。我想提供从内容中定义的内容注入组件的能力。

基本上我需要渲染两次，第一次用字符串替换我的{{pageTitle}}，第二次用组件替换{{my-component}}。

这样做的最佳解决方案是什么？

谢谢

【问题讨论】：

【解决方案1】：

您可以使用新的 {{component}} 帮助器（在最新版本的 Ember 中）呈现组件

{{component 'my-component'}}

{{component c.myPageTitleComponent}}

要显示文本，您可以做两件事：

在您的模板中

您可以直接在模板中实现文本

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

你可以实现一个父组件：

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

然后在 'my-parent-component' 中，它看起来像这样：

{{text}} {{component componentName}}

这实际上没有任何意义，除非您需要在 my-parent-component 中添加一些自定义逻辑。

【讨论】：