Skip to content

Instantly share code, notes, and snippets.

@dmitry
Created October 18, 2011 21:09
Show Gist options
  • Star 7 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save dmitry/1296732 to your computer and use it in GitHub Desktop.
Save dmitry/1296732 to your computer and use it in GitHub Desktop.
Creating a Backbone.js View Manager
/**
Big thanks to Derick Bailey for his post here:
http://lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone-apps/
*/
(function(Account) {
/** LOTS OF MODEL, COLLECTION, AND VIEW CREATION GOING ON UP HERE, LEFT IT OUT FOR SIMPLICITY */
/**
* Define Routing.
*/
Account.Route.Registration = Backbone.Router.extend({
'routes': {
'': "index",
'!/choose': "choose"
},
'initialize': function(args) {
if(args.view_managers) { _.each(args.view_managers, function(view_manager, name) { this[name] = view_manager; }, this); }
this.customer = new Account.Model.Customer();
this.customer_view = new Account.View.Customer({'model': this.customer});
},
'index': function() {
this.registered_products = new Account.Collection.RegisteredProducts();
this.registered_products_view = new Account.View.RegisteredProducts({'collection': this.registered_products});
this.$account.show({'view': this.registered_products_view, 'remove': true});
},
'choose': function() {
this.choose_products = new Account.Collection.ChooseProducts({'filter': "Spring 11"});
this.choose_products_view = new Account.View.ChooseProducts({'collection': this.choose_products});
this.$account.show({'view': this.choose_products_view, 'remove': true});
},
});
/**
* Need a view manager to clean stuff up.
*/
Account.ViewManager = function(options) {
var settings = $.extend({
'container': $("#mainContent"),
'transition': "fade",
'speed': 200
}, options), current_view, transition = {
'fade': function(callback) { $(this.el).fadeToggle(settings.speed); if(callback) callback.call(this); return this; },
'normal': function(callback) { $(this.el).toggle(settings.speed); if(callback) callback.call(this); return this; },
'slide': function(callback) { $(this.el).slideToggle(settings.speed); if(callback) callback.call(this); return this; }
};
Backbone.View.prototype.deconstruct = function() {
transition[settings.transition].call(this, function() {
this.remove();
this.unbind();
if(this.terminate) { this.terminate(); }
});
};
this.show = function(options) {
if(options) {
if(options.remove) { this.remove(options.view); } else { this.hide(options.view); }
if(options.view) { this.view = options.view; }
}
if(this.view) { settings.container.html(transition[settings.transition].call(this.view.render()).el); } else { alert("No view set."); }
};
this.hide = function() {
if(this.view) { transition[settings.transition].call(this.view); }
};
this.remove = function() {
if(this.view) { this.view.deconstruct(); }
};
};
/**
* Start it up.
*/
Account.Application = new Account.Route.Registration({'view_managers': {'$account': new Account.ViewManager({'container': $("#account")})}});
Backbone.history.start();
})(MZW.Account);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment