CODEWITHSUNDEEP
ember.js
mjallday
mjallday

Reputation: 10072

Ember.js - Delay update until ajax call complete

What's the recommended pattern for not displaying an unloaded intermediate result while waiting for slow AJAX calls to complete?

E.g. I have some controller code like this:

this.set('content', function () { Model.find(/* return some long running operation */) });

And while the app is waiting for that function to return some data it sets the content of the page to an empty object.

Ideally, if there is already loaded content that would stay displaying until the new content is ready to be rendered. What's the best way to achieve this?

Upvotes: 0

Views: 800

Answers (2)

Luke Melia
Luke Melia

Reputation: 8389

Promises are a good pattern for this.

var _this = this;
App.ModelObject.find(...).then(function(results){
   _this.set('content', results)
}

You don't say if ModelObject#find is something you implemented yourself, or if you are using a library, so the promise may be something available for you out of the box or something you would implement yourself using Ember.RSVP.

Upvotes: 1

mjallday
mjallday

Reputation: 10072

I achieved this like so (this is inside my controller when loading a new object):

var _this = this;
search = App.ModelObject.find(...);
search.addObserver('property_that_exists_on_loaded_+object', function (search) {
    _this.set('content', search);
});

I'm not sure but this may be missing some code to remove the observer after it has loaded which is what most examples of using addObserver do.

I'm also not sure if this will fail to fire if that property is updated before the addObserver is registered to the object.

Upvotes: 0

Related Questions