Ember.js new routing api

Question

I'm currently migrating my application from ember 1.0.0-pre2 to 1.0.0-pre4 and I am having issues with the new routing API.

My use case does not seem to be covered by the new guides in documentation.

I have always a chatting div on the side next to the rest of the app, my application template looks something like this:

<script type="text/x-handlebars" data-template-name="application">
    <div id="main-content">
         <aside>
            {{outlet chat}}
         </aside>
         {{outlet main}}
     </div>
</script>

With the old router conf mapping the URL on both controllers and their respective outlets.

Router : Ember.Router.extend({
    root: Ember.Route.extend({
        index: Ember.Route.extend({
            route: '/',
            connectOutlets: function(router, event) {
                router.get('applicationController').connectOutlet('main', 'main');
                router.get('applicationController').connectOutlet('chat', 'chat');

            }
        })
    })

How can I migrate this code to the new API or change the way I have coded this if it's a bad design for Ember.

I think I can generalize my question to, how can we use new routing API to map several controllers, taking care of different parts of the page, to the same URL.

Thx

Nycholas Oliveira Oliveira Nycholas Oliveira Oliveira · Accepted Answer · 2013-01-19T20:13:55

Follows the example according to documentation[1].

App.Router.map(function() {
    this.resource('index', {path: '/'});
});

App.IndexRoute = Ember.Route.extend({
    renderTemplate: function(controller, model) {
        this.render('main', {outlet: 'main'});
        this.render('chat', {outlet: 'chat'});
    }
});

[1] - http://emberjs.com/guides/routing/

Ember.js new routing api

1 Answers