javascript - 如何通过变量动态调用 ember 组件？

Question

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

//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}

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

Answer 1

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

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}}