How to dynamically load ember components by name in a template?

Question

My question is basically the same as on this answer, but I can't get the code to work with ember 1.7.0 and & ember-cli.

I have a widget property 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 question model that looks like:

{ 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've created a render-component helper 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 this doesn't work. component is undefined. The API docs for Ember.Handlebars.get aren't very helpful in explaining what the options parameter is. Also, there's no mention of a resolveHelper method in the docs now, so I don't know if the code is out of date anyway.

How can I load components by name from a variable?

Ed4 · Answer 1 · 2019-01-26T06:33:18.617

4

This question is quite out of date. Ember includes a built-in dynamic component helper and has for a long time.

edited Jan 26 '19 at 06:33

answered Nov 08 '16 at 14:28

Ed4

2,277
18
18

score 0 · Accepted Answer · answered Sep 22 '14 at 12:50

0

OK so it 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}}

answered Sep 22 '14 at 12:50

jbrown

7,518
16
69
117

could you provide a compatible version for Ember 1.10? I'm trying to load components by name within a {{#each}} block and send params to them. thanks – Nexus Feb 22 '15 at 08:06
Please give more examples how to pass bindParam and other params? http://stackoverflow.com/questions/29412559/how-to-render-component-helper-by-name-from-instance-field thx in advance – Vasiliy vvscode Vanchuk Apr 02 '15 at 13:02
Looks like you no longer need a custom helper to accomplish this: https://guides.emberjs.com/release/components/defining-a-component/#toc_dynamically-rendering-a-component – RavenHursT Sep 18 '18 at 20:54

score 0 · Answer 3 · answered Jun 05 '15 at 08:47

0

Another one implementation for render-component you can find here

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

It allow pass name and argument/parametrs from dynamical properties

answered Jun 05 '15 at 08:47

Vasiliy vvscode Vanchuk

7,007
2
21
44

How to dynamically load ember components by name in a template?

3 Answers3

Linked