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 model.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));