Backbone Scene

backbone-scene.js

/*
* backbone.scene.js v0.1
* Copyright 2012, Jason Kadrmas (@itooamaneatguy)
*/

(function(Backbone, _, $) {

	"use strict";

	Backbone.Scene = Backbone.View.extend({});

	_.extend(Backbone.Scene.prototype, {
		
		// Object to hold scene children
		children: null,

		// Toggle if scene is enabled
		enabled: true,

		// Can be overridden by extended class.
		initialize: function() {},

		// Can be overridden by extended class.
		show: function() {
			this.$el.show();
		},

		// Can be overridden by extended class.
		hide: function() {
			this.$el.hide();
			this.destroy();
		},

		applyElements: function() {
			if ( this.elements ) {
				_.each(this.elements, function( item, key ) {
					this[key] = this.$el.find(item);
				}, this);
			}
		},
		
		cleanup: function( callback ) {
			
			if ( callback ) {
				callback.call();
			}
			
			if ( this.destroy ) {
				this.destroy();
			}
		},

		/*
		*	Renders an underscore template assigns the $el to it, and appends it to a container.
		*	@method : renderTemplate
		*	@param : template : underscore template
		*	@param : data : the data to combine with the template
		*	@param : container : container to append generated template to
		*/

		renderTemplate: function(template, data, container) {
			this.$el.html( this.compileTemplate( template, data ) );
			container.append( this.$el );
		},

		/*
		*	Compiles an underscore template and returns the generated html.
		*	@method : compileTemplate
		*	@param : template : underscore template
		*	@param : data : the data to combine with the template
		*/

		compileTemplate: function(template, data) {
			var compiledTemplate = _.template( template, data );
			return compiledTemplate;
		},

		/*
		*	Fetches an underscore template async and executes a callback.
		*	@method : fetchTemplate
		*	@param : path : path to template file
		*	@param : callback : callback function to execute when loaded.
		*/

		fetchTemplate: function(path, callback) {
			var _self = this;
			$.get(path, function(contents) {
				callback.call(_self, contents);
			});
		},


		/*
		*	Fetches an underscore template async and executes a callback.
		*	@method : fetchTemplate
		*	@param : path : path to template file
		*	@param : callback : callback function to execute when loaded.
		*/

		fetchCompileTemplate: function(path, data, callback) {
			var _self = this;
			$.get(path, function(contents) {
				var compiled = _self.compileTemplate(contents, data);
				callback.call(_self, compiled);
			});
		},

		/*
		*	Adds an element to our scene object.
		*	@method : addElement
		*	@param : key : unique key for the added view
		*	@param : child : actual view to add
		*/

		addElement: function(key, child) {
			if(this.children === null) {
				this.children = {};
			}

			this.children[key] = child;
			return this.children[key];
		},

		/*
		*	Removes an element from our scene object.
		*	@method : removeElement
		*	@param : key : unique key for the view to remove
		*/
		
		removeElement: function(key) {
			this.children[key].remove();
			delete this.children[key];
		},

		/*
		*	Removes all elements from scene
		*	@method : removeAll
		*/

		removeAll: function() {
			this.children = null;
		},

		/*
		*	Gets a view based on the key
		*	@method : get
		*	@param : key : unique key for the view to retrieve
		*/

		get: function(key) {
			return this.children[key];
		},

		/*
		*	Destroys a scene
		*	@method : destroy
		*/

		destroy: function() {

			// Remove from DOM
			this.remove();
			
			// Unbind all events
			this.off();

			// Removes all children
			this.removeAll();

			// Destroy model
			if(this.model) {
				this.model.destroy();
			}
		}
	});

})(this.Backbone, this._, jQuery);