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="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 src="http://cdnjs.cloudflare.com/ajax/libs/ember-data.js/1.0.0-beta.5/ember-data.min.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    <h1>Application Template</h1>
    {{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="index">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <table class="table table-bordered table-hover">
                <thead>
                    <tr>
                        <th>User</th>
                        <th>Email</th>
                    </tr>
                </thead>
                <tbody>
                    {{#each}}
                        <tr>
                            <td>{{user}}</td>
                            <td>{{email}}</td>
                            <td><button class='btn btn-xs btn-danger' {{action 'remove' 'remove-client-modal' this}}><i class='fa fa-trash-o fa-lg'>x</i></button>
                            </td>
                        </tr>
                    {{/each}}
                </tbody>
            </table>
        </div>
    </div>
</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.ApplicationAdapter = DS.RESTAdapter.extend();

  App.IndexRoute = Ember.Route.extend({
    model: function(){
      var foos = this.store.find('foo');
        
      Ember.run.later(function(){
          httpRespond('get', '/foos', '{ "foos": [{ "id": 2, "user": "Jason", "email": "jason@foo.com" },{ "id": 3, "user": "Mike", "email": "mike@foo.com" },{ "id": 4, "user": "Stan", "email": "stan@foo.com" },{ "id": 5, "user": "Brian", "email": "brian@foo.com" }]}');
      }, 15);
        
      return foos;
    }
  });
    
  App.IndexController = Ember.ArrayController.extend({
      actions: {
          remove: function (templateName, model) {
              model.destroyRecord();
          }
      }
  });
    
  App.Foo = DS.Model.extend({
    user: DS.attr('string'),
    email: DS.attr('string')
  });   
}(window));