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

admin管理员组

文章数量:1404754

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 /#/property/1, the route gets rewritten to /#/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.

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.

• javascript
• ember.js

Share Improve this question Follow edited May 23, 2017 at 12:27 CommunityBot 111 silver badge asked Aug 21, 2012 at 22:40 birdericbirderic 3,76511 gold badge2424 silver badges3636 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

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 :-)

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

});

本文标签： javascriptEmberjsAsyncronous call in model find() methodStack Overflow