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="http://sinonjs.org/releases/sinon-server-1.7.1.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 'createPerson'}}>Add person</button>
  <button {{action 'updatePerson'}}>Update person</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) {
  var server = host.server = sinon.fakeServer.create();
  server.autoRespond = true;
  server.autoRespondAfter = 100;
  var header = { "Content-Type": "application/json" };
  var peopleGetResponse = '{ "people": [{ "id": 1, "firstName": "Joe", "lastName": "Somebody" }] }';
  server.respondWith("GET", "/people", [ 200, header, peopleGetResponse ]);
  var peoplePostResponse = '{ "person": { "id": 2, "firstName": "Tom", "lastName": "Cat" } }';
  server.respondWith("POST", "/people", [ 201, header, peoplePostResponse ]);

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

  App.ApplicationAdapter = DS.RESTAdapter.extend();

  App.IndexRoute = Ember.Route.extend({
    model: function(){
      return this.store.findAll('person');
    },
    actions: {
      createPerson: function() {
        var person = this.store.createRecord('person');
        person.setProperties({
          firstName: 'Tom',
          lastName: 'Cat'
        });
        person.save();
      },
      updatePerson: function() {
        this.store.find('person', 1).then(function(person){
          person.set('firstName', 'June');
          person.save();
        });
      }
    }
  });

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