App Initialization
This example demonstrates how to use the Giraffe.App initialization feature. It's a convenient way to get your app into a ready state, and it handles both synchronous and asynchronous initializers.
var app = new Giraffe.App(); Giraffe.App has two methods to help with initialization, addInitializer
and start. The addInitializer method queues up functions that run when
start is called. The start method takes some optional options and then
passes them through each initializer, and when initialization completes,
the app instance is extended with the initialization options. The this of
each initializer is the app.
app.addInitializer(function(options) {
this.$el.append('<p>initializer `this` is app: ' + (this === app) + '</p>'); // => true
options.thisWillBeAddedToTheView = 'afterInitializationCompletes';
});If addInitializer is passed a function with 2 arguments, fn.length === 2,
the second argument is assumed to be an asynchronous callback. Initialization
will not proceed until the callback is called. Per Node.js convention, if
cb is called with a truthy first argument, an error is thrown and
initialization halts.
app.addInitializer(function(options, cb) {
setTimeout(cb, 100); // initialization will not proceed until `cb` is called
});The app fires events when it's initializing and initialized,
'app:initializing' and 'app:initialized'. Let's figure out how much time
elapses between them.
app.on('app:initializing', function(options) {
this.$el.append('<p>app is initializing</p>');
options.startTime = Date.now();
console.log('started', app.started); // => false
});
app.on('app:initialized', function(options) {
this.$el.append('<p>app is initialized</p>');
var elapsedTime = (Date.now() - options.startTime) + 'ms';
this.$el.append('<p>elapsed initialization time: ' + elapsedTime + '</p>'); // => ~100ms
options.thisWillBeAddedToTheView === this.thisWillBeAddedToTheView; // => true
console.log('started', app.started); // => true
});Now that our initializers are added, let's attach and start up the app.
app.attachTo('body').start();Here's what happened:
var app = new Giraffe.App();
app.addInitializer(function(options) {
this.$el.append('<p>initializer `this` is app: ' + (this === app) + '</p>'); // => true
options.thisWillBeAddedToTheView = 'afterInitializationCompletes';
});
app.addInitializer(function(options, cb) {
setTimeout(cb, 100); // initialization will not proceed until `cb` is called
});
app.on('app:initializing', function(options) {
this.$el.append('<p>app is initializing</p>');
options.startTime = Date.now();
console.log('started', app.started); // => false
});
app.on('app:initialized', function(options) {
this.$el.append('<p>app is initialized</p>');
var elapsedTime = (Date.now() - options.startTime) + 'ms';
this.$el.append('<p>elapsed initialization time: ' + elapsedTime + '</p>'); // => ~100ms
options.thisWillBeAddedToTheView === this.thisWillBeAddedToTheView; // => true
console.log('started', app.started); // => true
});
app.attachTo('body').start();<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' type='text/css' href='../css/reset.css' />
</head>
<body>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>
<script src="../backbone.giraffe.js" type="text/javascript"></script>
<script type='text/javascript' src='appinitialization0-script.js'></script>
</body>
</html>