CODEWITHSUNDEEP
ember.js
m0c
m0c

Reputation: 2191

Rendering a controller/template/route into another template

This is probably a very common task, but I am not sure which is the right approach to tackle this.

I have a Route / Controller / Model setup that loads groups. In the header area before the main content I want to show notifications for the user. I have created a notificationcontroller that is an arraycontroller and as well as a route that loads all notifications.

I don't want this route to be used for anything else than within this area.

I have already tried in my groups.hbs to add an additional {{ outlet notification }} and try to render in it:

App.GroupsRoute = GambifyApp.BaseRoute.extend({
    model: function() {
        return this.get('store').find('group');
    },

    renderTemplate: function() {
        this.render('notifications', {   // the template to render
                // into: 'notifications',                // the route to render into
                outlet: 'notification',              // the name of the outlet in the route's template
                controller: 'notifications',       // the controller to use for the template
                });
        this.render('groups');
    }

});

But somehow my notifications template is not used. For now there is not much in my NotificationsController (It's an ArrayController) , NotificationsRoute is only reading all Notifications as Model and the template is currently only text, which is not rendered in my groups.hbs

Upvotes: 1

Views: 495

Answers (1)

Luke Melia
Luke Melia

Reputation: 8389

The template containing the outlet you want to render into must be rendered first in order to render into the outlet. Here is an example of rendering into a named outlet that is in the application template from the index route:

http://emberjs.jsbin.com/qoyi/1/edit?html,js,output

Leave a comment if this example doesn't clear it up for you.

Upvotes: 1

Related Questions