Problem

You want to load data from a server and have it available in your Ember application for observation and manipulation.

Solution

Use jQuery.ajax and convert the response into Ember observable objects. You use reopen to add a finder method to your model class. The general workflow of the finder method is the following:

  1. You create an empty result object.
  2. You make an asynchronous call to your API…
  3. … and in your success callback you fill your empty object.
  4. You return your result object.

Note the slight differences between returning an array and a single object.

  1. App.User.reopenClass({
  2.   findAll : function(){
  3.     var result = [];
  4.     $.ajax({
  5.       url : '/users',
  6.       dataType : 'json',
  7.       success : function(response) {
  8.         response.forEach(function(user){
  9.            var model = App.User.create(user);
  10.            result.addObject(model);
  11.         });
  12.       }
  13.     });
  14.     return result;
  15.   },
  16.   findById : function(id){
  17.     var result = App.User.create();
  18.     $.ajax({
  19.       url : '/users/' + id,
  20.       dataType : 'json',
  21.       success : function(response) {
  22.         result.setProperties(response);
  23.       }
  24.     });
  25.     return result;
  26.   }
  27. });

Discussion

Alternatively you could also return a promise (Ember.Deferred) with your finder methods. The code for this approach could look like the following:

  1. App.User.reopenClass({
  2.   findAll : function(){
  3.       var promise = Ember.Deferred.create();
  5.     $.ajax({
  6.       url : '/users',
  7.       dataType : 'json',
  8.       success : function(response) {
  9.           var result = [];
  10.         response.forEach(function(user){
  11.            var model = App.User.create(user);
  12.            result.addObject(model);
  13.         });
  14.         promise.resolve(result);
  15.       }
  16.     });
  17.     return promise;
  18.   },
  19.   findById : function(id){
  20.     var promise = Ember.Deferred.create();
  22.     $.ajax({
  23.       url : '/users/' + id,
  24.       dataType : 'json',
  25.       success : function(response) {
  26.           var result = App.User.create();
  27.         result.setProperties(response);
  28.         promise.resolve(result);
  29.       }
  30.     });
  31.     return promise;
  32.   }
  33. });

Example

JS Bin