New Router v2

by anshulguleria

HTML

<script src="https://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">
  <header>
    <img src="http://lorempixel.com/400/100/animals/"/>
  </header>
  
  <div class="content">
    {{outlet}}
  </div>
  
  <footer>
    <p>© Joe's Lamprey Shack - All Rights Reserved</p>
  </footer>
</script>

<script type="text/x-handlebars" data-template-name="home">
  <h3>Hours</h3>
  {{testValue}}
  {{#if isLoaded}}
  <ul>
    {{#each entry in hours}}
    <li>{{entry}}</li>
    {{/each}}
  </ul>
  {{else}}
    <p class="loading">Loading Hours</p>
  {{/if}}
</script>

CSS

/* Spinner graphic from - http://mentalized.net/activity-indicators/ */
.loading {
  background: url('http://s9.postimage.org/d6mf5zpuz/indicator_white.gif') no-repeat;
  padding-left: 20px;
}

JavaScript

App = Ember.Application.create();

App.Router = Ember.Router.extend();
App.Router.map(function(match) {
  match("/").to("home");
});

// This is here because we don't have a backing restful web service.
// We are using jsfiddle's echo feature instead:
// http://doc.jsfiddle.net/use/echo.html
var data = {
  json: JSON.stringify({
    hours: [
      "Monday through Friday: 9am to 5pm",
      "Saturday: Noon to Midnight",
      "Sunday: Noon to 6pm"
    ]
  }),
  delay: 2 // two second delay
};

App.HomeRoute = Ember.Route.extend({
  setupControllers: function(controller) {
    $.ajax({ url: "/echo/json/", data: data, type: "POST"})
      .then(function(json) {
        controller.set('hours', json.hours);
        controller.set('isLoaded', true);
      });
  }
});

App.HomeController = Ember.Controller.extend({
  // The HomeRoute will populate the hours
  hours: null,
  testValue: 'data from controller'
});

App.initialize();