如何通過變量動態調用余燼組件？

Question

可以說我在控制器上有一個小部件對象數組，每個小部件對象都有一個成員變量，該成員變量被分配了一個組件類的名稱。 如何獲得我的模板來調用該組件？

//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 ...}}標簽，如下所述： 調用具有變量名的車把{{render}} 。 默認的渲染助手有一個類似的問題，它不會在變量名的內容上調用渲染。 我願意編寫一個自定義組件車把幫手，但我什至不知道從哪里開始。 謝謝。

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

Answer 2

在Ember 1.11中， 新的component幫助器允許您執行以下操作：

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

截至今天（2015年1月19日），1.11不是穩定版本，但該功能已在canary版本中提供 。

Answer 3

聽起來我遇到了很多與您相同的問題。 所有組件都注冊為頂級幫助程序，這意味着您可以執行與鏈接的方法類似的方法來創建創建查找的車把幫助程序。 像這樣：

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的答案。

Answer 4

如果您使用的是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
• 灰燼v1.7.0
• 車把1.3.0