How to dynamically load ember components by name into a template?
My question is basically the same as on this answer , but I can't seem to get the code to work with ember 1.7.0 and ember-cli.
I have a property widget
in my model and in my template I want to have something like:
{{#each question in questions}}
{{#with question}}
<label>{{title}}</label>
{{render-component widget params=params}}
{{/with}}
{{/each}}
And a model of the question that looks like this:
{ 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'
}
}
}
I have created a helper render-component
that contains the following:
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);
But it doesn't work. component
- undefined. The API docs for Ember.Handlebars.get don't really help explain what a parameter is options
. Also, there is no mention of the method in the docs resolveHelper
, so I don't know if the code is outdated anyway.
How to load components by name from a variable?
source to share
OK, so this should be:
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);
Use with:
{{render-component widget params=params}}
source to share
This question is outdated. Ember includes a built-in dynamic helper component and has been around for a long time.
source to share
Another implementation for the render component which you can find here
https://github.com/vvs-code/ember-render-helper
Resolves name and argument pass / parametrs from dynamic properties
source to share