Как динамически загружать компоненты ember по имени в шаблон?

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 не определено. Документы API для Ember.Handlebars.get не очень помогают объяснить, что такое параметр 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

Этот вопрос довольно устаревший. У Ember был built-in solution с этой проблемой с 1.11.0 (выпущен примерно в марте 2015 года).