Search code examples
javascriptember.jsurl-routingember-router

Ember.js new routing api


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


Solution

  • 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/