Ember Data Canary

Using Sinon to mock server

HTML

<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
<script src="http://builds.emberjs.com/canary/ember.js"></script>
<script src="http://builds.emberjs.com/canary/ember-data.js"></script>
<script src="https://dl.dropboxusercontent.com/u/5739722/js/fake_xml_http_request.js"></script>
<script src="https://dl.dropboxusercontent.com/u/5739722/js/fakehr.js"></script>
<script src="https://dl.dropboxusercontent.com/u/5739722/js/httpRespond.js"></script>
<script type="text/x-handlebars" data-template-name="application">
  <h1>ember-canary jsfiddle</h1>
  {{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
  <h2>Index Content:</h2>
    {{Header}}
    <ul>{{#each Users}}<li>{{firstName}} {{lastName}}</li>{{/each}}</ul>
    {{Users}}
</script>

CSS

h1 { font-size: 1.6em; padding-bottom: 10px; }
h2 { font-size: 1.4em; }
ul { padding: 15px; font-size: 1.4em; color: green; }

JavaScript

(function(host) {
  fakehr.start();
   host.App = Ember.Application.create({});

  App.IndexRoute = Ember.Route.extend({
    model: function(){
      var users = Ember.$.getJSON("/users"); 
      
      // intercepts the XHR request and responds with the JSON below.. since I don't have an API for this
      Ember.run.later(function(){
          httpRespond('get', '/users', '{ "Header":"This is the header","Users": [{ "id": 1, "firstName": "Tom", "lastName": "Dale" },{ "id": 2, "firstName": "Jason", "lastName": "Mitchell" }] }');
      }, 15);
        
      return users;
    }
  });
}(window));