Understanding BackboneJS

Question

I just started on learning BackboneJS and I'm doing a small sample document to test it's way of working. But I have a hard time understanding it and at this moment it doesn't make any sense at all :)

So, I have the next file structure :

/* application.js */
var Application = Application || {};

;(function ( $, window, document, undefined ) {

    new Application.ApplicationView();

})( jQuery, window, document );


/* sample.js */
var Application = Application || {};

;(function ( $, window, document, undefined ) {

    Application.ApplicationView = Backbone.View.extend({

    });

})( jQuery, window, document );


/* utilities.js */
var Application = Application || {};

;(function ( $, window, document, undefined ) {

Application.ApplicationUtilities = Backbone.Collection.extend({

    polyfillize : function(tests) {

        return _.each(tests, function(obj){
            console.log(obj);
            Modernizr.load([{
                test : _.reduce(obj.test, function(initial_value, current_value){
                    return initial_value && current_value;
                }, 1),
                nope : obj.polyfill,
                callback: function(url, result, key) {
                    console.log('Polyfill : ', [ url ]);
                }
            }]);
        });
    }

});

})( jQuery, window, document );


/* options.js */
var Application = Application || {};

;(function ( $, window, document, undefined ) {

Application.ApplicationOptions = Backbone.Model.extend({

    version : [ 1 ],

    prettify : true,

    libraries : {

        google_code_prettyfier : 'assets/js/libraries/google/prettify.js' 

    },

    dependencies : {

        google_code_prettyfier : function() {
            return Modernizr.load([{
                test : this.prettify,
                yep : [ this.libraries.google_code_prettyfier ],
                callback: function(url, result, key) {
                    return window.prettyPrint && prettyPrint();
                }
            }]);
        }
    },

    polyfills : {
        json_polyfill_url : 'http://cdn.chaoscod3r.com/code/polyfills/json3_polyfill.js',
        storage_polyfill_url : 'http://cdn.chaoscod3r.com/code/polyfills/localstorage_polyfill.js'
    }

});

})( jQuery, window, document );


/* polyfills.js */
var Application = Application || {};

;(function ( $, window, document, undefined ) {

Application.ApplicationPolyfills = Backbone.Model.extend({

    loadPolyfills : function() {
        return Application.ApplicationUtilities.polyfillize([
            {
                test        : [Modernizr.localstorage, Modernizr.sessionstorage],
                polyfill    : [Application.ApplicationOptions.polyfills.storage_polyfill_url]
            },
            {
                test        : [Modernizr.json],
                polyfill    : [Application.ApplicationOptions.polyfills.json_polyfill_url]
            }
        ]);
    }

});

})( jQuery, window, document );

Each model it's placed in it's own models folder, each collection in it's collections folder and so on. Then I'm loading all the script in the DOM, first the collections, then the models, the views and last the application.js.

What I want to do is be able to use the collection as a collection of functions that I can use whenever I want in the Views or the Models, the options should be available on any level and in any of the collections / models / views. So it would be like my sample.js file will contain the main View which will initialize everything that needs to run onDOM load like loading all the polyfills if necessary, enabling the google code prettifier and so on.

Obviously nothing works at this state, so I would like someone more experienced to help me out if possible or maybe point to some tutorials that match what I'm trying to do right now :)

Answer 1

You seem to be a little confused about what Backbone collections are all about.

A collection in Backbone is a collection of (Backbone) models:

Backbone.Collection

Collections are ordered sets of models. [...]

When you say this:

var C = Backbone.Collection.extend({
    method: function() { ... }
});

you're creating a "class" and method will be available as an "instance method" after you create a new instance but you can't call method directly on C because extend puts method on C.prototype for inheritance:

C.method(); // This doesn't work, you'll just get an error.
var c = new C;
c.method(); // This works

You say that

it made sense to have it in a collection, a collection of utility functions :)

but, unfortunately, just because something makes sense doesn't mean that it really is sensible :)

You don't have any models for Application.ApplicationUtilities so it isn't a collection in the Backbone sense. I think you just want to use an object as a namespace:

Application.ApplicationUtilities = {
    polyfillize: function(tests) { /* ... */ }
};