ember.js and the server

Digging just a bit around emberjs on GitHub I have found this: https://github.com/emberjs/data:

Ember Data is a library for loading models from a persistence layer (such as a JSON API), updating those models, then saving the changes. It provides many of the facilities you'd find in server-side ORMs like ActiveRecord, but is designed specifically for the unique environment of JavaScript in the browser.

I'd also suggest reading Ember.js Live Collections. What you want is to have a collection of models that will know how to sync with server side, possible example code is:

// our modelApp.Person = Ember.Object.extend();App.people = Ember.ArrayController.create({  content: [],  save: function () {    // assuming you are using jQuery, but could be other AJAX/DOM framework    $.post({      url: "/people",      data: JSON.stringify( this.toArray() ),      success: function ( data ) {        // your data should already be rendered with latest changes        // however, you might want to change status from something to "saved" etc.      }    });  }});

You'd then call App.people.save() at needed occasions.

Also be sure to check out this article, Advice on & Instruction in the Use Of Ember.js, that goes deeper into server-client communication with Ember and also mentions emberjs/data.

Note: Emberjs Data Library should be used with caution for the fact that it is not production ready.

In Ember.js, the "model" contained in the Ember object will contain a further abstraction of an underlying server side database, if you're using one. The controller portion of the application then should have methods which allow you to retrieve and send data which are called when needed in order to update the model (using Ajax). This is nice because you have a model which can respond quickly on the client side to any input a user provides the application (keystrokes, mouse movements, whatever) and selectively choose when to make relatively costly queries to a server side database, for example. This way some of the performance of the app is no longer hindered by the latency of data requests to an an external server, which in some cases can allow you to create applications whose responsiveness approaches that of native apps.

I like to picture Ember.js in pairs like this

• Views and Templates are correlated (obviously), tweak the Views-Class to control the Template (like the classNames)
• Router and Routes work a bit like the controller in MVC. They are responsible for routing the request to the correct endpoint
• Controller and Model are model centric, one (the Model) describes the data you will handle in your application while the controller behaves like a kind of proxy (or decorator, if that's more up your alley). Templates will hook up to the controller for example and

Basically that means you load up your controller (single or array) with a model and can now easily model the processes working on that model (i.e. the stuff that does not touch the model in its core/data) in your controller. For an example blog application you would describe the Post in the model and add something like that for the controller

App.PostController = Ember.ObjectController.extend({  content: null,  // initial value  isExpanded: false,  expand: function() {    this.set('isExpanded', true)  },  contract: function() {    this.set('isExpanded', false)  }});

Now you can interact with the represenation of the model in terms of frontend thinking through the controller. Expanding a post or not does not change the model, only changing the data does.

In terms of reloading data from the server, I have two answers for you

1. I found this article quite helpful in understanding the connections (and simple polling, albeit simple)
2. If you're using Rails, you will get lucky with upcoming Rails 4 Live, see this post and demo for the juicy parts