javascript - Ember without Ember Data

Question

Ember data is still not at version 1.0 and thus I decided to use Ember without Data models.

I have my own models, and those are created by the route model function.

However maintaining state between the frontend objects and the backend objects is a nightmare. Especially when one route uses another routes models.

• How can this be achieved, should I write my own store and model find method?
• Should I use Ember Data (even though it's not at version 1.0 ?) perhaps an ETA on Ember Data 1.0 ?
• write code to update the models on the frontend each time I change a model?
• Another method?

Is what I'm doing best practices or should I be doing it differently? My gut feeling is that without using Ember Data I should write my own store. I'd love to get feedback from some of you guys.

Example of a model:

App.Person = Ember.Object.extend(App.Serializable,Em.Copyable,{
  user_email : null //used in routing dynamic segements and as old email when making changes to email
  ,first_name: null
  , last_name: null
  , fullname : function () {
    return this.first_name + ' ' + this.last_name;
  }.property('first_name','last_name').cacheable()
};

App.Person.reopenClass({
  createRecord: function(data) {
    return App.Person.create({
      user_email : data.email
      , first_name: data.first_name
      , last_name : data.last_name
}});

Example of how I load the class models:

App.UsersRoute = App.AuthenticatedRoute.extend( {
  model : function () {
    return new Ember.RSVP.Promise(function(resolve, reject) {
      $.getJSON('/users').then(function(usersData) {
        var userObjects = [];
          usersData.forEach(function (data) {
            userObjects.pushObject(App.Person.createRecord(data));
          });
        resolve( userObjects);
        },function(error) {
          reject(error);
      });
    })
  },

Subroutes use the model:

App.UsersAvailableRoute = App.AuthenticatedRoute.extend( {
     model : function () {
        return {
          allUsers :  Ember.ArrayController.create({
            content : this.modelFor('users').filter( function (user) {
                      return user.availablity === 100
                      }),

Example of how I update the model in a controller:

App.UsersAvailableController = Ember.ArrayController.extend({
needs : ['users']
    ,applyPersonAssign : function (person,need,project) {
          need.set('allocated',person);
          var updateObject = Ember.copy(project,true);
          if (Ember.isEmpty(need.get('inProject'))) {
            updateObject.projectNeeds.pushObject(need);
          }

          return $.ajax({
            url: '/projects/' + updateObject.get('codename'),
            "type": "PUT",
            "dataType": "json",
            data: updateObject.serialize()
          })

Answer 1

You don't necessarily need to recreate the Ember Data store. Ember works just fine with POJOs, you can also wrap your POJOs in an Ember Object to give you some fun built in features.

That being said creating a custom adapter which caches results could be convenient.

Here's an example where I create an adapter that supports caching. You can slowly build on the concept for all of the basic things you need.

App.FooAdapter = Ember.Object.extend({
  cache:{},
  find: function(id){
    var self = this,
        record;
    if(record = this.cache[id]){
      return Ember.RSVP.cast(record);
    }
    else
    {
      return new Ember.RSVP.Promise(function(resolve){
        resolve($.getJSON('http://www.foolandia.com/foooo/' + id));
      }).then(function(result){
        record = self.cache[id] = App.Foo.create(result);
        return record;
      });
    }
  }
});

In the examples below, I use the container to register the adapter on all of my routes/controllers so I had lazy easy access to it.

http://emberjs.jsbin.com/OxIDiVU/742/edit

If you always want it to be a promise:

http://emberjs.jsbin.com/OxIDiVU/740/edit

Reusability

The example above may make it look like you'd have to do a ton of work, but don't forget, Ember is super reusable, take advantage of the magic.

App.MyRestAdapter = Em.Object.extend({
  type: undefined,
  find: function(id){
    $.getJSON('http://www.foolandia.com/' + this.get('type') + '/' + id
  }
});

App.FooAdapter = App.MyRestAdapter.extend({
  type: 'foo' // this would create calls to: http://www.foolandia.com/foo/1
});

App.BarAdapter = App.MyRestAdapter.extend({
  type: 'bar' // this would create calls to: http://www.foolandia.com/bar/1
});

This is the basic idea of what Ember Data/Ember Model is. They've tried to create a ton of defaults and built in coolness, but sometimes it's overkill, especially if you are just consuming data and not doing CRUD.

Example: http://emberjs.jsbin.com/OxIDiVU/744/edit

Also you can read this (says the same stuff):

How do you create a custom adapter for ember.js?