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

时间:2015-03-05 22:29:54

标签: javascript ember.js handlebars.js

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

我有一个包含这样内容的变量:

page.js

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

page.hbs

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

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

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

做这样的事情的最佳解决方案是什么?

由于

1 个答案:

答案 0 :(得分:0)

您可以使用新的{{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中需要一些自定义逻辑,否则这没有用。