CODEWITHSUNDEEP
javascriptember.js
birderic
birderic

Reputation: 3765

Ember.js - Asyncronous call in model find() method

I have implemented find() and findAll() methods on my Property model. Both methods make asynchronous calls to an API. findAll() is called while connecting the outlets for my home route, and works fine. find() is called by Ember.js while connecting the outlets for my property route. Note that find() is not called when navigating to a property route through actions, but is called when you go directly to the route through the URL.

Here is my router:

App.Router = Ember.Router.extend({
    root: Ember.Route.extend({
        showProperty: Ember.Route.transitionTo('property'),
        home: Ember.Route.extend({
            route: '/',
            connectOutlets: function(router) {
                router.get('applicationController').connectOutlet('home', App.Property.findAll());
            }        
        }),
        property: Ember.Route.extend({
            route: '/property/:property_id',
            connectOutlets: function(router, property) {
                router.get('applicationController').connectOutlet('property', property);
            }
        }),
    })
});

And here are my findAll() and find() methods:

App.Property.reopenClass({
    find: function(id) {
        var property = {};
        $.getJSON('/api/v1/property/' + id, function(data) {
            property = App.Property.create(data.property);
        });
        return property;
    },
    findAll: function() {
        var properties = [];
        $.getJSON('/api/v1/properties', function(data) {
            data.properties.forEach(function(item) {
                properties.pushObject(App.Property.create(item));
            });
        });
        return properties;
    }
});

When I go to a route other than index, for example http://app.tld/#/property/1, the route gets rewritten to http://app.tld/#/property/undefined. Nothing is being passed to the content property of the Property controller. How can I make asynchronous calls in the find() method? Unless I am mistaken, asynchronous calls work fine in the findAll() method, which is the source of my confusion.

This question is similar to Deserialize with an async callback, but I'm using the find() method instead of overriding the deserialize() method.

Thanks in advance.

Upvotes: 6

Views: 1948

Answers (2)

ThomasFrederiksen
ThomasFrederiksen

Reputation: 196

I found that setting the id property explicitly solves this problem. In your case this would look like this.

find: function(id) {
  var user = App.User.create();

  $.getJSON('/api/v1/property/' + id, function(data) {
    user.setProperties(data.user)
  });

  user.set("id",id); // <-- THIS

  return user;
}

Once your user gets its properties set the view updates as normal. Ember just need the id part before in order to update the URL.

Hope this helps :-)

Upvotes: 8

nicholaides
nicholaides

Reputation: 19489

Here's what you want to be doing. I changed the model to User to make things a little clearer.

In the case of find(), you return a blank model instance that gets it's properties filled in when the AJAX request comes back. The nice thing about Ember's data-binding is that you can display this model in a view immediately and the view will update when the AJAX request returns and updates the model instance.

In the case of findAll(), you return a blank array that gets filled in when the AJAX request comes back. In the same way as find(), you can display this list of models (which at first will be blank) in a view and when the AJAX request returns and fills in the array, the view will update.

App.User.reopenClass({

  find: function(id) {
    var user = App.User.create();

    $.getJSON('/api/v1/property/' + id, function(data) {
      user.setProperties(data.user)
    });

    return user;
  },

  findAll: function() {
    var userList = [];

    $.getJSON('/api/v1/properties', function(data) {
      var users = data.users.map(function(userData) {
        return App.User.create(userData);
      });
      userList.pushObjects(users);
    });

    return userList;
  }

});

Upvotes: 0

Related Questions