Simple Ember Routing example no output via handlebars

Question

I have been trying to learn Ember, I have written a very simple routing example by following other examples here on SOF. I have three views:

Home Mars Jupiter

I would like to have three nav links that would call/resolve to mentioned views. I don't what am I doing wrong, I cannot seem to get any output at all. I would highly appreciate if if someone can point out the faults.

Here is the fiddle: http://jsfiddle.net/combustion007/PvCk8/

APP CODE:

$(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){
                    router.get('applicationController').connectOutlet('mars');
                }
            }),

            jupiter: Em.Route.extend({
                route: '/',
                connectOutlets: function(router, context){
                    router.get('applicationController').connectOutlet('jupiter');
                }
            }),         
        })
    });
    App.initialize();
})

HTML:

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

Answer 1

Changes to your jsfiddle http://jsfiddle.net/cteegarden/PvCk8/7/:

• Added handlebars js library
• fixed 2 typos: extende changed to extend and tempaltName to templateName
• updated the mars and jupiter routes to be accessible at route's other than '/'
• removed the init method on App

The {{outlet}} in the application handlebars template is filled with the home view by default when the application is in the '/' state, mars view when the application is in the '/mars', and the jupiter view when the application is in the '/jupiter'. The 3 links you have in the navbar template programmatically change the state to each of those, causing the {{outlet}} to be replaced with the correct view.

Edit

Two resources with examples of similar routing

• Right way to do navigation with Ember
• http://codebrief.com/2012/07/anatomy-of-an-ember-dot-js-app-part-i-redux-routing-and-outlets/

Answer 2

I went through your jsFiddle and fixed a number of things to make it work: http://jsfiddle.net/arasbm/fLBty/3/

It still doesn’t do what you want, because there are some things that you need to decided on. The main issue with that code was that / was defined three times in the router. You only need to define it once and then connect all the outlets inside that route:

root: Em.Route.extend({

    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');
        }
    })            
})

Because in this case multiple outlets are used inside the same route you need to name the outlet:

<script type="text/x-handlebars" data-template-name="application">
    {{view App.NavbarView}}
    <br /><hr />
    {{outlet home_outlet}}
    {{outlet mars_outlet}}
    {{outlet jupiter_outlet}}
</script>

I have only been using ember for a few months, so I don’t have a very good perspective of it yet. I hope this will help you a bit to move forward.

Edit: Updated the answer based on comment about the new router API not being released yet.

If you are just starting out with ember take a look at the router API v2 guide by tomdale which is the most up to date information about how router will be defined in Ember 1.0. But as was pointed out in the comments, it is not in the master yet.