Routing Example

Routing Views

by combustion007

HTML

<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-1.0.0-pre.2.min.js"></script>
    <script type="text/x-handlebars" data-template-name="application">
        {{view App.NavbarView controllerBinding="controller.controllers.navbarController"}}
        <br /><hr />
        <div class="content">
            {{outlet}}
        </div>
    </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</h2>
        <hr />
        <br /><br />          
    </script>


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

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

JavaScript

$(function()
    {
        App = Em.Application.create({
            name: "superman",
            init: function(){
                alert("APP INIT");
            }
        })

        //    APPL
        App.ApplicationController = Em.Controller.extend();
        App.ApplicationView = Em.View.extend({
            templateName: 'application'
        });
        
        //    NAVBAR
        App.NavbarController = Em.Controller.extend();
        App.NavbarView = Em.View.extende({
            templateName: 'navbar',
            classNames: ['']
        });
        
        //    HOME
        App.HomeController = Em.Controller.extend();
        App.HomeView = Em.View.extend({
            tempalteName: '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({
                gotoHome: Ember.Route.transitionTo('home'),
                gotoMars: Ember.Route.transitionTo('mars'),
                gotoJupiter: Ember.Route.transitionTo('jupiter'),
        
            // STATES
                home: Em.Route.extend({
                    route: '/',
                    connectOutlets: function(router, context){
                        router.get('applicationController').connectOutlet('home');
                    }
                }),
                
                mars: Em.Route.extend({
                    route: '/',
                    connectOutlets: function(router, context){
...