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?