CODEWITHSUNDEEP
ember.js
TommyKey
TommyKey

Reputation: 568

ContainerView not connecting childviews and controller properly

I have an container view defined below

app.MainView = Ember.ContainerView.extend({
    childViews: ['navigationView', 'gutterView', 'mainView'],
    elementId: 'master',
    navigationView: app.NavView,
    gutterView: app.GutterView,
    mainView: Ember.View.create({
        elementId: 'content',
        template: Ember.Handlebars.compile('{{outlet contentOutlet}}')
    })
});
app.NavView = Ember.View.extend({
    elementId: 'main-menu',
    classNames: ['navigationPanel'],
    template: Ember.Handlebars.compile('{{controller}}')
});
app.NavController = Ember.ArrayController.extend({
    content: [],
});

the problem here is that when I define it like this the controller for app.NavView (app.NavController) does not get connected to the view. if I look at the {{controller}} for the NavView through the template i get the ApplicationController.

But when I define it like this:

 app.MainView = Ember.ContainerView.extend({
    childViews: ['navigationView', 'gutterView', 'mainView'],
    elementId: 'master',
    navigationView: Ember.View.extend({
        elementId: 'nav',
        template: Ember.Handlebars.compile('{{outlet navOutlet}}')
    }),
    gutterView: app.GutterView,
    mainView: Ember.View.create({
        elementId: 'content',
        template: Ember.Handlebars.compile('{{outlet contentOutlet}}')
    })
});

and connect the NavView through the connectOutlet in the router 

router.get('applicationController').connectOutlet('navOutlet', 'nav');

I get that the connected controller in NavView is NavController, which is correct!

The question is, what am I missing here? I don't want an outlet here and want it to be created through the mainView. Why is Ember not connecting the View and Controller properly when I use an ContainerView?

Upvotes: 2

Views: 691

Answers (1)

sly7_7
sly7_7

Reputation: 12011

The "connection" between view and controller is not as "automagic" as you believed. using the outlets it's done via the call to 

router.get('applicationController').connectOutlet('aOutlet', 'nav');

If you walk through the code of https://github.com/emberjs/ember.js/blob/master/packages/ember-views/lib/system/controller.js#L102 you will see that it's retrieving the controller via naming convention, and then connect the just created view to it.

If you don't want to use outlet here, I suggest you to manually give the controller to the view.

EDIT: To precise why the controller of NavView is Application in the first case:

using the NavView class directly as a child of the mainView, does not bind automatically the NavController to it. So, when you try to get it's controller, it fallbacks to its parentView's controller,.

Upvotes: 1

Related Questions