Предположим, что у меня есть массив объектов виджетов на моем контроллере, и каждый объект виджета имеет переменную-член, которой назначено имя класса компонента. Как я могу заставить свой шаблон вызывать этот компонент?
//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...}} с помощником handlebars, как описано здесь: Вызов Handlebars {{render}} с именем переменной. У вспомогательного помощника по умолчанию есть аналогичная проблема, где он не будет вызывать рендеринг в содержимом имени переменной. Я бы хотел написать специальный помощник handbars компонента, но я даже не могу понять, с чего начать. Спасибо.
В Ember 1.11 новый component помощник позволяет вам сделать это:
{{#each widget in widgets}}
{{component widget.componentClass}}
{{/each}}
На сегодняшний день, 19 января 2015 года, 1.11 не является стабильным выпуском, но эта функция находится в канареечной версии.
Я пробовал это и, похоже, сработал, но его просто догадки с моей стороны:
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}}
Похоже, я столкнулся с теми же проблемами, что и вы. Все компоненты зарегистрированы как помощники верхнего уровня, а это значит, что вы можете сделать аналогичный метод с тем, который вы связали с созданием помощника руля, который выполняет поиск. Вот так:
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.
Снова изменилось. Ember.Handlebars.resolveHelper теперь правильный способ сделать это. См. Ответ @StrangeLooper.
Если вы используете 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 постоянно меняется, вот версия, на которую я ее протестировал: