title: Simple Ember Routing example no output via handlebars
body: <p>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: </p>
  
  <p>Home
  Mars
  Jupiter</p>
  
  <p>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.</p>
  
  <p>Here is the fiddle: 
  <a href="http://jsfiddle.net/combustion007/PvCk8/" rel="nofollow">http://jsfiddle.net/combustion007/PvCk8/</a></p>
  
  <p>APP CODE:</p>
  
  <pre><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();
  })
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;script type="text/x-handlebars" data-template-name="application"&gt;
      {{view App.NavbarView controllerBinding="controller.controllers.navbarController"}}
      &lt;br /&gt;&lt;hr /&gt;
      &lt;div class="content"&gt;
          {{outlet}}
      &lt;/div&gt;
  &lt;/script&gt;
  
  &lt;script type="text/x-handlebars" data-template-name="navbar"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#" {{action gotoHome}}&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" {{action gotoMars}}&gt;Mars&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#" {{action gotoJupiter}}&gt;Jupiter&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/script&gt;
  
  
  &lt;script type="text/x-handlebars" data-template-name="home"&gt;
      &lt;h2&gt;Home&lt;/h2&gt;
      &lt;hr /&gt;
      &lt;br /&gt;&lt;br /&gt;          
  &lt;/script&gt;
  
  
  &lt;script type="text/x-handlebars" data-template-name="mars"&gt;
      &lt;h2&gt;Mars&lt;/h2&gt;
      &lt;hr /&gt;
      &lt;br /&gt;&lt;br /&gt;          
  &lt;/script&gt;
  
  &lt;script type="text/x-handlebars" data-template-name="jupiter"&gt;
      &lt;h2&gt;Jupiter&lt;/h2&gt;
      &lt;hr /&gt;
      &lt;br /&gt;&lt;br /&gt;          
  &lt;/script&gt;
  </code></pre>