Ember Data Canary

Using Sinon to mock server

by pixelhandler

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>
  <ul>
  {{#each}}
    <li>{{firstName}} {{lastName}}</li>
  {{/each}}
  </ul>
  <button {{action 'updatePerson'}}>Update person</button>
  <button {{action 'createPerson'}}>Add person</button>
  <button {{action 'logIntercepted'}}>Show intercepted XHRs in console</button>
</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 people = this.store.findAll('person');
      Ember.run.later(function(){
        httpRespond('get', '/people', '{ "people": [{ "id": 1, "firstName": "Joe", "lastName": "Somebody" }] }');
      }, 15);
      return people;
    },
    actions: {
      createPerson: function() {
        var person = this.store.createRecord('person');
        person.setProperties({
          firstName: 'Tom',
          lastName: 'Cat'
        });
        person.save();
        Ember.run.later(function(){
          httpRespond('post', '/people', '{ "person": { "id": 2, "firstName": "Tom", "lastName": "Cat" } }');
        }, 15);
      },
      updatePerson: function() {
        this.store.find('person', 1).then(function(person){
          person.set('lastName', 'Nobody');
          person.save();
          Ember.run.later(function(){
            httpRespond('put', '/people/1', '{ "person": { "id": 1, "firstName": "Joe", "lastName": "Nobody" } }');
          }, 15);
        });
      },
      logIntercepted: function() {
        console.dir(fakehr.requests);
      }
    }
  });

  App.Person = DS.Model.extend({
    firstName: DS.attr(),
    lastName: DS.attr()
  });
}(window));