如何在模板中動態加載按名稱排列的組件？

Question

我的問題與this answer基本相同，但我無法使用代碼使用ember 1.7.0和& ember-cli。

我在我的模型widget財產，並在我的模板我想有這樣的：

{{#each question in questions}} 
{{#with question}} 
    <label>{{title}}</label> 
    {{render-component widget params=params}} 
{{/with}} 
{{/each}} 

這看起來像一個問題型號：

{ id: 6, 
    title: "Is this a yes/no situation?", 
    help_text: 'Pick an option', 
    widget: 'yes-no', 
    params: 
    { 
    yes: { 
     text: 'You picked yes', 
     class: 'success' 
    }, 
    no: { 
     text: 'Be careful, you picked no', 
     class: 'danger' 
    } 
    } 
} 

我創建a render-component幫手包含以下內容：

import Ember from 'ember'; 

function renderComponent(componentPath, options) { 
    console.log('inside helper with comp=' + componentPath + ', opts=' + options); 
    var component = Ember.Handlebars.get(this, componentPath, options); 
    var helper = Ember.Handlebars.resolveHelper(options.data.view.container, component); 
    return helper.call(this, options); 
} 

export { 
    renderComponent 
}; 

export default Ember.Handlebars.makeBoundHelper(renderComponent); 

但是這不起作用。 component未定義。 Ember.Handlebars.get的API文檔對於解釋options參數是什麼並不是很有幫助。另外，現在文檔中沒有提及resolveHelper方法，所以我不知道代碼是否已過時。

如何從一個變量名稱加載組件？

Answer 1

行，所以它應該是：

helpers/render-component.js：

import Ember from 'ember'; 

function renderComponent(componentPath, options) { 
    console.log('inside helper with comp=' + componentPath + ', opts=' + options); 
    var helper = Ember.Handlebars.resolveHelper(options.data.view.container, componentPath); 
    return helper.call(this, options); 
} 

export { 
    renderComponent 
}; 

export default Ember.Handlebars.makeBoundHelper(renderComponent); 

使用帶：

{{render-component widget params=params}} 

Answer 2

另外一個實施渲染組件，您可以在這裏找到

https://github.com/vvs-code/ember-render-helper

它允許通過名稱和參數/動態屬性參數

Answer 3

這個問題是相當過時。自從1.11.0（2015年3月左右發佈）以來，Ember對此問題有built-in solution。