17

假设我的控制器上有一个小部件对象数组，每个小部件对象都有分配了组件类名称的成员变量。如何让我的模板调用该组件？

//widgets[0].widget.componentClass="blog-post"

{{#each widget in widgets}}
    {{widget.componentClass}}
{{/each}}

显然上面的例子只是吐出了一系列的小部件组件类的字符串版本。但是，这确实有效（只要您正确设置了所有内容）：

//widgets[0].widgets.viewClass="blogPost"

{{#each widget in widgets}}
    {{view widget.viewClass}}
{{/each}

那是我们之前的实现，但我们对此并不满意。我们目前正在使用带有把手帮助器的自定义 {{renderWidget ...}} 标签，如下所述：Calling Handlebars {{render}} with a variable name。默认的渲染助手有一个类似的问题，它不会对变量名的内容调用渲染。我愿意编写一个自定义组件车把助手，但我什至不知道从哪里开始。谢谢。

4

4 回答 4

12

我试过这个，它似乎有效，但这只是我的很多猜测：

Ember.Handlebars.registerHelper('renderComponent', function(componentPath, options) {
  var component = Ember.Handlebars.get(this, componentPath, options),
      helper = Ember.Handlebars.resolveHelper(options.data.view.container, component);

  helper.call(this, options);

});

你以同样的方式使用它：

{{#each widget in widgets}}
  {{renderComponent widget.componentClass widget=widget}}
{{/each}}
于 2014-02-05T22:57:33.810 回答
11

在 Ember 1.11 中，新的component帮助器允许您这样做：

{{#each widget in widgets}}
  {{component widget.componentClass}}
{{/each}}

截至今天，2015 年 1 月 19 日，1.11 还不是一个稳定的版本，但这个功能在金丝雀版本中。

于 2015-01-20T01:52:15.687 回答
6

听起来我遇到了很多和你一样的问题。所有组件都注册为顶级助手，这意味着您可以执行与您链接的方法类似的方法，即创建执行查找的把手助手。像这样：

Ember.Handlebars.registerHelper('lookup', function(component, options) {
  component = Ember.Handlebars.get(this, component, options);
  Ember.Handlebars.helpers[component].call(this, options);
});

然后在您的模板中：

{{#each widget in widgets}}
  {{lookup widget.componentClass}}
{{/each}}

这是一个带有工作示例的 jsbin：http: //jsbin.com/ucanam/2482/edit

希望有帮助！

- 编辑 -

出于某种原因，新版本的把手使从其他助手调用助手成为不可能。Ember.TEMPLATES相反，您可以通过全局查找模板。我已更新 JSBin 以使用此方法。

您也可以通过 获取模板options.data.view.templateForName(component)，但感觉比Ember.TEMPLATES.

-- 编辑 2 --

它又变了。Ember.Handlebars.resolveHelper现在是正确的方法。请参阅@StrangeLooper 的答案。

于 2013-10-18T05:01:58.393 回答
2

如果您使用的是 Ember CLI 和 Coffeescript，这里有一个版本。在 中创建以下文件app/helpers/render-component.coffee：

renderComponent = (componentPath, options)->
  helper = Ember.Handlebars.resolveHelper(options.data.view.container, componentPath)
  helper.call this, options

`export { renderComponent }`
`export default Ember.Handlebars.makeBoundHelper(renderComponent)`

从那里，您可以{{render-component "foo-bar"}}从模板调用。

由于 Ember 生态系统不断变化，以下是我对其进行测试的版本：

  • Ember-CLI v0.0.43
  • Ember v1.7.0
  • 车把 1.3.0
于 2014-09-22T17:58:16.730 回答