Displaying the Right Data in Ember.JS : Part I

Ember.JS is a powerful front-end JavaScript framework that allows developers to create web applications that are seamless and responsive to the degree that they feel like desktop application. In oder to accomplish this Ember uses two powerful tools. A built-in AJAX/JQuery engine that wraps and facilitates data requests to the API server and a client-side data store where such data is stored locally for super fast loading. Generally the flow of a request from an Ember application proceeds like this:

  1. User clicks on a link in the application
  2. Ember makes an AJAX request to the appropriate route in the API server
  3. The server responds with a JSON containing the requested data
  4. Ember receives the JSON data and stores in the the local store.
  5. Ember updates the appropriate sections of the views with data from the local store.

The important thing to note here is that once data is received from the API and stored in the local store, it will be available for display upon future requests without having to re-query the API. Only requests for new data will require communication with the API.

This flow leads to some interesting design conventions:

  1. It is the responsibility of the API to filter and serve the appropriate data for the view.
  2. Ember is usually limited to identifying the correct API route to query, storing whatever data was received in the local store and displaying it in the appropriate template.

Together, the flow and the conventions make it quite easy to render views of a users’s attributes and even a user’s data that is associated through hasMany or belongsTo relationships.

To illustrate, let’s review the following example where we want to show a Cyclist’s rides that he has signed up for. The relevant relationships are:

  • a cyclist has many rides
  • a ride has many cyclists

Working from the client side:

The view that we want to show is:

A list of rides for a particular user

To get this data we execute the following request in the route handler (app/routes/rides.js)

The route handler executes the request to the local store which is populated with data this and all previous requests for ‘rides’ to the API

The above route handler will make a request for rides to the local store. If it cannot find the appropriate rides, it will trigger a request to the API and put them in the store. Then it will load all rides available in the store to the template. In part II of this series, we will see why the fact that all of the rides available in the store are loaded is very important. For now, let’s assume that this is the first time in the session that the user triggers this request. Ember will hit the ‘/rides’ route of the API which will route to the controller which processes the request in this manner:


The controller responds to the request with a JSON of all rides for the current_cyclist

The above controller responds to the ember request with a JSON containing all of the rides for the current cyclists (see Duncan Standish’s — my partner on this project — blogpost on setting a current user in Ember).

Once the data is received by Ember, it is stored in the local store, and ready for display in the template. The template makes use of the route handler’s model, which in this case is an array of rides, to display the rides like this:


The template uses the route handler’s model, an array of rides, to display each ride.

which yields the view that we wanted:

In Part II of this series, we will explore some issues that arise when we want to display the same data class (e.g. rides)for other users from within the ‘current’ user’s profile.