Backbone.ready: A generic way to launch a backbone app

readme.md

Backbone ready()

Relying on the $().ready event to load the backbone app may not be always the best option.

Backbone.ready is trying to bridge the gap by encapsulating a number of fallbacks in a custom .ready() method

Features

The ready method currently supports (in order of priority):

• Phonegap Shim
• jQuery
• Zepto

Usage

in your main.js initiate the app as follow:

Backbone.ready( function (){
    // initialize APP
    window.app = new APP( config );
    // start backbone history
    Backbone.history.start();
});

backbone.ready.js

/*
 * Backbone.ready()
 * Source: https://gist.github.com/tracend/5617079
 *
 * by Makis Tracend( @tracend )
 *
 * Usage:
 * Backbone.ready( callback );
 *
 */
(function(window, document, $, Backbone){

	// find the $
	$ = $ || ( ('$' in window) ? window.$ : window.jQuery || window.Zepto || false ); // need to account for "local" $

	Backbone.ready = function( callback ){

		if( isPhonegap() ){
			return PhoneGap.init( callback );

		} else if( $ ) {
			// use the 'default' ready event
			return $(document).ready( callback );

		} else if (window.addEventListener) {
			// ultimate fallback, add window event - trigger the page as soon it's loaded
			return window.addEventListener('load', callback, false);

		} else {
			// IE...
			return window.attachEvent('onload', callback);
		}

	};

	// Helpers

	// - Support Phonegap Shim: https://github.com/makesites/phonegap-shim
	function isPhonegap(){
		// only execute in app mode?
		return typeof PhoneGap != "undefined" && typeof PhoneGap.init != "undefined" && typeof PhoneGap.env != "undefined"  && PhoneGap.env.app;
	}

	return Backbone;

})(window, document, $, Backbone);

component.json

{
  "name": "backbone.ready",
	"version": "0.2.0",
	"main": "./backbone.ready.js",
	"repository": {
		"type": "git",
		"url": "git:/gist.github.com/5617079.git"
	},
	"licenses": [
	{
		"type": "MIT license",
		"url": "http://www.makesites.org/licenses/MIT"
	}
	],
	"dependencies": {
    		"backbone": "*" 
	}
}