Best way to dynamically render a component


#1

I have a json feed that has a list of 50 or so questions. Each question has a question “type”. Each question type has a corresponding component to render its content, all extending from the question-base component.

I want to know the best way to dynamically render a component for each question type, the way that I am doing it seems like it cant be the best way. Does anyone have a better than solution than shown below for this problem?

In order to dynamically render a different component for each question, I have built a handlebars helper. It works as shown below.

define("scripts/helpers/render-question-component", ["ember"], function(Ember) {
  return function renderQuestion(options) {
    var component, helper, type;
    type = this.get('question').get('type');
    switch(type) {
      case 'one':
        component = 'question-one-type';
        options.hash.textBinding = 'question.text';
        ...........
        break;
      default:
        throw new Ember.Error('no component found for type ' + type);
    }
    helper = Ember.Handlebars.resolveHelper(options.data.view.container, component);
    helper.call(this, options);
  };
});

And is then implemented like this

{{renderQuestionComponent question=question}}