Routing Example

Routing Views

HTML

<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.rc.1.js"></script>
<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-latest.js"></script>
    <script type="text/x-handlebars" data-template-name="application">
        {{view App.NavbarView}}
        <br /><hr />
        {{outlet home_outlet}}
        {{outlet mars_outlet}}
        {{outlet jupiter_outlet}}
    </script>

    <script type="text/x-handlebars" data-template-name="navbar">
        <ul>
            <li><a href="#" {{action gotoHome}}>Home</a></li>
            <li><a href="#" {{action gotoMars}}>Mars</a></li>
            <li><a href="#" {{action gotoJupiter}}>Jupiter</a></li>
        </ul>
    </script>


    <script type="text/x-handlebars" data-template-name="home">
        <h2>Home View</h2>
        <hr />
        <br /><br />          
    </script>


    <script type="text/x-handlebars" data-template-name="mars">
        <h2>Mars View</h2>
        <hr />
        <br /><br />          
    </script>

    <script type="text/x-handlebars" data-template-name="jupiter">
        <h2>Jupiter View</h2>
        <hr />
        <br /><br />          
    </script>

JavaScript

App = Em.Application.create({
    autoinit: false,
    name: "superman"
})

//    APPL
App.ApplicationController = Em.Controller.extend({});
App.ApplicationView = Em.View.extend({
    templateName: 'application'
});

//    NAVBAR
App.NavbarController = Em.Controller.extend({});
App.NavbarView = Em.View.extend({
    templateName: 'navbar',
    classNames: ['']
});

//    HOME
App.HomeController = Em.Controller.extend({});
App.HomeView = Em.View.extend({
    templateName: 'home',
    classNames: ['']
});

//    MARS
App.MarsController = Em.Controller.extend({});
App.MarsView = Em.View.extend({
    templateName: 'mars',
    classNames: ['']
});

//    JUPITER
App.JupiterContoller = Em.Controller.extend({});
App.JupiterView = Em.View.extend({
    templateName: 'jupiter',
    classNames: ['']
});

//ROUTER INIT
App.Router = Em.Router.extend({
    enableLogging: true,
    location: 'hash',
    
    //    EVENTS
    root: Em.Route.extend({

    // STATES
        whatever: Em.Route.extend({
            route: '/',
            connectOutlets: function(router, context){
                router.get('applicationController').connectOutlet('home_outlet', 'home');
                router.get('applicationController').connectOutlet('mars_outlet', 'mars');
                router.get('applicationController').connectOutlet('jupiter_outlet', 'jupiter');
            }
        })            
    })
});

App.initialize();