why return a jquery deferred object inside backbone sync?

3
votes

I was checking the code from a Backbone JQuery mobile sample app http://jquerymobile.com/test/docs/pages/backbone-require.html

and found the following inside the collection object

// Overriding the Backbone.sync method (the Backbone.fetch method calls the sync method when trying to fetch data)
sync: function( method, model, options ) {

            // Local Variables
            // ===============

            // Instantiates an empty array
            var categories = [],

                // Stores the this context in the self variable
                self = this,

                // Creates a jQuery Deferred Object
                deferred = $.Deferred();

            // Uses a setTimeout to mimic a real world application that retrieves data asynchronously
            setTimeout( function() {

                // Filters the above sample JSON data to return an array of only the correct category type
                categories = _.filter( self.jsonArray, function( row ) {

                    return row.category === self.type;

                } );

                // Calls the options.success method and passes an array of objects (Internally saves these objects as models to the current collection)
                options.success( categories );

                // Triggers the custom `added` method (which the Category View listens for)
                self.trigger( "added" );

                // Resolves the deferred object (this triggers the changePage method inside of the Category Router)
                deferred.resolve();

            }, 1000);

            // Returns the deferred object
            return deferred;

        }

I just want to understand the part that deferred is declared and returned, why do we even need that? No callback is being attached to it. And also I really don't understand why we use setTimeout and have the deferred object resolve inside it.

3
jquerybackbone.js
unrelated, but it should return deferred.promise() there - someone correct me if i am wrong. - mkoryak

3 Answers

2
votes

The deferred object is for managing asynchronous methods -- it's useful for setting up success/error callbacks without creating confusing nested callback blocks. It's also great for handling scenarios where you need to wait for more than one asynchronous operation to finish. Deferred is separate from but implemented by the JQuery AJAX methods.

As just one example of how you might use this in Backbone, consider the case where you need to load both some JSON data and an HTML template from the server(s). You may need two async calls to complete before you can render the view. Using Deferred is a convenient way to handle this, as you can pass multiple promise objects to when, which will get invoked when all are complete.

For info on deferred, it's worth exploring the documentation on the JQuery site.

(And note, although no callbacks are visible in the code there, it's possible to attach success/error callback from, for example, Backbone.Model.fetch.)

1
votes

just read the code :)

// Uses a setTimeout to mimic a real world application that retrieves data asynchronously

Deferred objects do not need to have a callback attached to them when they are created, thats the whole point of them. you should read up on them.

0
votes

For extensibility sake, if I were consuming this I could wire up handlers on the Deferred object without having to modify this implementation.

The setTimeout is purely "show and tell", it's mimicking some sort of service call. So one might consume it like so:

var myDeferred = myCollection.sync();
myDeferred.error(function() {
     /* error handling */
})
.done(function() { /* clean up state */ });