Route/Controller organization in a large project


#1

I have been using ember for about a week now so I’m still very now. I’m in charge of writing a very large application (previously written in flex) using ember and kendo UI. I’m running into a bit of a challenge and maybe it’s just about how I’m looking at things.

In the flex version of this application, we have a System creation wizard. It has 3-4 steps with multiple selections on each step. In flex, this is all contained in a single “View” that shows/hides pieces as needed. So, at the end of the process, when we go to save the controller, all the selections are right there. I’m curious how to achieve the same thing with Ember.

My initial organization was going to have a route for each step of the wizard. But, options in several dropdowns in step 2 are dependent on dropdown selections in step 1. How is best to organize this so everything I select in step 1 (route 1) is available to step 2 (route 2).

I have tried creating one large Controller for the entire process but when I do that, I am losing the ability to bind selects. I have some code like this:

QQWizard.UnitsController = Ember.ArrayController.extend({});

QQWizard.UnitsView = Ember.Select.extend({
    contentBinding: "this.controller",
    prompt: "Pick a unit:",
    optionLabelPath: "content.name",
    optionValuePath: "content.id"
});

That works fine when I do {{render “units”}}, I set the content of this in the setupController hook in the route. But if I have this as a part of a larger controller (i.e.):

QQWizard.SystemController = Ember.ObjectController.extend({
	units: Ember.ArrayController.extend({})
});

QQWizard.UnitsView = Ember.Select.extend({
    contentBinding: "this.controllerFor('system').get('units')",
    prompt: "Pick a unit:",
    optionLabelPath: "content.name",
    optionValuePath: "content.id"
});

The binding will not work. So, basically I’m concerned with how to get things all to work together in a larger project setting.

Thanks for any guidance you can give


#2

Try using controller.controllers and needs instead. Also, using this.controllerFor() in the view may not work.


#3

You might also consider using a single model instance containing all of the properties required for a complete System. Pass it from controller to controller and you’ll always have the state you need.