Ember.js views (unlimited number)

Question

so I need to be able to support an (finitely) unlimited number of views in ember.

Basically, I'm creating a survey app. The survey can have an undefined number of steps, hence an undefined number of views/controllers. The number of steps is got from the server, along with the content and the handlebars template (there are only a finite number of possible content types for a step), and I need some way of being able to extend the survey for the different surveys. So basically one ember app handles the entire thing, I've managed to abstract my code for rendering the content types out enough that it doesn't matter for the ember step: i now just need to make it support an unlimited number of steps

Is it possible to have ember views and controllers, but instead of referencing them by name, reference them by array indice? Like normally you'd go App.TestView = …, and router.get('applicationController').connectOutlet('test'), but could I use App.AllView[0] = Ember.View.extend(); and router.get('applicationController').connectOutlet('test')[0] or something? Then I can have a for loop at the start, which grabs the survey data which contains the content types and number of steps, plug it in a view array, and we're away

There might be other ways to achieve this, so any solutions would be great. Creating a new ember app is not an option, the same app needs to service whatever is passed in as a survey object.

If you have n number of views, do u need to have n number of urls one for each of the view ? — Mudassir Ali

gbabiars gbabiars · Accepted Answer · 2012-12-06T13:00:30

You could create an array of view classes that contains the different steps. You can add new views to the array using the handlebars template name.

App.surveyViews = [];
App.surveyControllers = [];
App.surveyViews['firstStep'] = Em.View.extend({ templateName: 'my-handlebars-template' });
App.surveyControllers['firstStep'] = Em.Controller.extend();

Your route can take in the step from the route and use that to look up the appropriate view class and controller to use for the connectOutlet.

step: Em.Route.extend({
    route: '/:step',
    connectOutlets: function(router, context) {
        router.get('applicationController').connectOutlet({ 
            viewClass: App.surveyViews[context.step], 
            controller: App.surveyControllers[context.step].create(),
            context: {}
        });
    }
})

You can add any extra logic you need for the context, etc., but that would be the basic idea.

Ember.js views (unlimited number)

1 Answers