Search⌘ K
AI Features
Home
Courses
Introduction to Marionette.js – The Backbone Framework

Add Deferreds

Explore how to implement jQuery deferreds in Marionette.js applications to manage data latency. Learn to return promises for asynchronous operations, synchronize view rendering with data availability, and handle missing data scenarios for reliable app performance.

We'll cover the following...

Our goal is to find a way to wait until the contact data has been returned before instantiating our view.

Using jQuery deferreds

One way to achieve this is by using a callback function, which doesn’t scale well. What if we need to wait for multiple data sources to be returned before displaying them? Recursively providing callbacks to callbacks starts getting very difficult, very fast.

Instead, we’ll use jQuery deferreds, which will allow us to use a much cleaner mechanism to wait for the required data before instantiating a view. Let’s use a deferred object to return a promise from our contact:entity handler:

Node.js
getContactEntity: function(contactId){
    var contact = new Entities.Contact({id: contactId}); 
    var defer = $.Deferred();
    setTimeout(function(){
        contact.fetch({
            success: function(data){
                defer.resolve(data);
            }
        });
    }, 2000);
    return defer.promise();
}

In line 3, we declare a Deferred object instance. In line 11, we return a promise on that object. A deferred object is essentially ...