Ember.js - Asynchronous call in the find () method of the model

Question

I applied the find() and findAll() methods in my property model. Both methods make asynchronous API calls. findAll() is called when the outputs for my home route are connected and works fine. find() is called by Ember.js when connecting outputs for my properties route. Note that find() not called when navigating a property route through actions, but is called when you go directly to a route through a 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 the index, for example http://app.tld/#/property/1 , the route is rewritten to http://app.tld/#/property/undefined . Nothing is passed to the content property of the Property controller. How can I make asynchronous calls in the find() method? If 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 asynchronous callback , but I use the find() method instead of overriding the deserialize() method.

Thanks in advance.

Answer 1

I found that setting the id property explicitly solves this problem. In your case, it will 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 their properties, install view updates as usual. To update the URL, Ember just needs the id part.

Hope this helps :-)

Answer 2

Here is what you want to do. I changed the model to a user to make things a little clearer.

In the case of find() you return an instance of the empty model, which gets its properties populated when the AJAX request is returned. The good thing about Ember data binding is that you can immediately display this model in the view, and the view will be updated when the AJAX request returns and updates the model instance.

In the case of findAll() you return an empty array that is populated when the AJAX request is returned. Just like find() , you can display this list of models (which will first be empty) in the view, and when the AJAX request returns and populates the array, the view is updated.

 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; } });