Take the 2-minute tour ×

I want to learn using Ember.js for my next project. So far I have read the documentation here but I saw no explanation about Router. Then I read the guide here but I still don't understand how to use Router properly. I tried using Router this way, I want 2 route:

  1. /login which displays a button to enter the second route
  2. /home which displays a button to enter the first route

This is just a very simple code to test using Router to switch between "pages". I tried using this code but all I get is a blank page:

<script src="js/libs/handlebars-1.0.0.beta.6.js"></script>
<script src="js/libs/ember-1.0.pre.min.js"></script>
    var App = Ember.Application.create();

    App.ApplicationController = Ember.Controller.extend();
    App.ApplicationView = Ember.View.extend();

    App.LoginView = Ember.View.extend({
        templateName: 'login-page'

    App.HomeView = Ember.View.extend({
        templateName: 'home-page'

    App.router = Ember.Router.create({
        enableLogging: true,
        root: Ember.Route.extend({
            index: Ember.Route.extend({
                route: '/',
                redirectsTo: 'login'
            login: Ember.Route.extend({
                route: '/login',
                doLogin: Ember.Route.transitionTo('home'),
                connectOutlets: function (router) {
            home: Ember.Route.extend({
                route: '/home',
                doLogout: Ember.Route.transitionTo('login'),
                connectOutlets: function (router) {

<script type="text/x-handlebars" data-template-name="login-page">
    <h1>Login Page</h1>

    <button {{action doLogin}}>Login</button>

<script type="text/x-handlebars" data-template-name="home-page">
    <h1>Home Page</h1>

    <button {{action doLogout}}>Logout</button>

When I run this, the URL goes to #/login but it display nothing. Does anyone can show me how to make the above code works? Why do I get a blank page?

share|improve this question
what if you declare your App as a global (just removing var) ? Moreover, I think by searching a little on SO, there are now few router application snippets. –  sly7_7 Aug 6 '12 at 10:20
Where is your application view template? You connect to 'login' and 'home' outlets but where is it defined? –  zaplitny Aug 6 '12 at 10:23
connectOutlet 'home' will use instance of 'HomeView', it's internal of Ember.js, removing var makes no difference, and I did search the other route example on SO yet still don't understand why the above code not working –  Captain kurO Aug 6 '12 at 11:03
I apologize, I've seen many questions about that, so I wanted only to be sure the answer was not already here. –  sly7_7 Aug 6 '12 at 12:03
add comment

1 Answer

up vote 4 down vote accepted

Your code: http://jsfiddle.net/jPn3H/

...updated with a brand new 'application' template hooked up to App.ApplicationView: http://jsfiddle.net/pauldechov/jPn3H/1/

The .initialize() function appends App.ApplicationView to <body> for you. Those .connectOutlet(...) calls won't do much of anything unless there's an {{outlet}} to connect. Hope that helps.

share|improve this answer
yup I just found the same solution, thanks –  Captain kurO Aug 6 '12 at 11:26
After days of struggling and getting nowhere, this was the first hello world example that (almost) simply worked for me! The one catch was that I needed to wrap the initialize call: $(function() { App.initialize(App.router); }); So that it wouldn't run until everything loaded. Otherwise I got an error stating it couldn't find the application template. –  odigity Aug 31 '12 at 5:03
add comment

Your Answer


