Ember.js - child nested views' controller

Question

I'm building a simple calendar app with Ember. My views are nested this way :

<script type="text/x-handlebars" data-template-name="calendar">
    {{content.monthAsString}}
    {{#each day in content.days}}
       {{view App.DayView contentBinding="day"}}
    {{/each}}
</script>

<script type="text/x-handlebars" data-template-name'="calendarDay">
    {{content.date}}
</script>

My JS code :

App.CalendarController = Ember.ObjectController.extend({
    content:App.Calendar.create(...);
    oneDayHover:function(day){

    }
});
App.CalendarView = Ember.View.extend({
    templateName:"calendar"
});

App.CalendarDayController = Ember.ObjectController.extend({
    dayHOver:function(){
        //???? HOW TO ACCESS CalendarController?????
    }
});
App.CalendarDayView = Ember.View.extend({
    templateName:"calendarDay",
    init:function(){
        this._super();
        this.set('controller', App.CalendarDayController.create());
    },
    mouseEnter:function(){
        this.get('controller').dayHover();
    }
});

Problem 1: Isn't there a nicer solution than to override the init method of the view to set it's controller?

Problem 2: How can I access the oneDayHover of CalendarController from the CalendarDayController?

Thanks in advance for the help

Update 1: I should remark that those controllers exists in the same state. The point of the mouseenter is to display a popup on top of the CalendarDayView containing extra information.

mavilein mavilein · Accepted Answer · 2013-03-07T17:15:09

1 - Do not assign Controllers to Views manually. Let Ember do the heavy Lifting! Have a look at Embers Router API / how to define routes. Routes will connect controllers and views and render them (Doc).

2 - If you follow point 1, your other problem will get easy with Embers way of dependency injection:

App.CalendarDayController = Ember.ObjectController.extend({
    needs : ["calendar"],
    dayHOver:function(){
        //Access the single instance of CalendarController
        var calendarController = this.get("controllers.calendar");
    }
});

Update in response to Comment:

The CalendarRoute is created implicitly. Therefore all you would need to do, is modifying your template, i guess:

<script type="text/x-handlebars" data-template-name="calendar">
    {{content.monthAsString}}
    {{#each day in content.days}}
       {{control "calendarDay" day}}
    {{/each}}
</script>

As you see, i am suggesting the use of the {{control}} helper. What the code above basically says is :

"Dear Ember, please use the name 'calendarDay' to lookup App.CalendarView and App.CalendarDayController and use them to render the object day"

Additionally you have to tell ember, that it should not use the controller as singleton (which is the defaul behaviour):

App.register('controller:calendarDay', App.CalendarDayController, {singleton: false });

Note: I have not yet used the control helper myself, but this should be the way it works.

Ember.js - child nested views' controller

1 Answers