Skip to content

Instantly share code, notes, and snippets.

@blackjk3
Created May 15, 2012 19:24
Show Gist options
  • Save blackjk3/2704381 to your computer and use it in GitHub Desktop.
Save blackjk3/2704381 to your computer and use it in GitHub Desktop.
Backbone Scene
/*
* 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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment