EmberJs: 1 model, multiple views-controllers

Question

I'm quite new to Ember and I'm quite lost to find the better approach for my application:

Application: Screen is splited horizontally in 2 parts:

Left part is a form to fill Person attributes (name, lastName, email)
Right part is a graphical view of the left form

I don't know exactly the best solution:

Solution1:

Person object for the model (instance is a person object global variable for now)
PersonFormController to manage the form and make the attributes validation
PersonFormView to display the form
PersonRenderedController: to manage the rendering of the form
PersonRenderedView (only display view, no user interactions)
The 2 controllers have a reference to the person global variable for their content property
Use of "connect outlets" to connect the controllers/views router.get('applicationController').connectOutlet('left', 'personForm'); router.get('applicationController').connectOutlet('right', 'personRendered');

I'm not sure of this solution because the PersonRenderedController is not very useful and oly used for the "outlet connectivity".

Solution2:

Person object for the model (instance is a person object global variable for now)
PersonFormController to manage the form and make the attributes validation
PersonFormView to display the form
PersonRenderedView (only display view, no user interactions)
NO personRenderedController (no need because only display mode for this view)
NO outlets but manually creation of the 2 views (form and rendered) in the general template

I think that solution1 is perhaps more flexible (in case rendered view needs a controller)

Can you please advice ?

mavilein mavilein · Accepted Answer · 2013-01-01T23:41:00

Solution 1 seems better to me. Going with outlet is always a good idea. In this case you do not have to create a PersonRenderedController. You can use connectOutketin a way that suits your needs. The following paragraph is from the source and shows how to use this method with an options hash:

*/ connectOutlet: function(name, context) { // Normalize arguments. Supported arguments: // // name // name, context // outletName, name // outletName, name, context // options // // The options hash has the following keys: // // name: the name of the controller and view // to use. If this is passed, the name // determines the view and controller. // outletName: the name of the outlet to // fill in. default: 'view' // viewClass: the class of the view to instantiate // controller: the controller instance to pass // to the view // context: an object that should become the // controller's content and thus the // template's context.

This way you could reuse your 1 controller for the person also for your other view:

router.get('applicationController').connectOutlet({
   outletname: "right",
   viewClass : App.PersonRenderedView,
   controller: router.get("personFormController")
 })

So all i propose is using the more explicit version of connectOutlet, which gives you more control in contrast to the default approach based on name matching.

EmberJs: 1 model, multiple views-controllers

1 Answers