CSX Application Backbone
dependency free modular application structure
Goals
- Independent modular application structure
- Easily require shared modules
- Clear documentation
Core Backbone Extensions
- Backbone.Composer
- Backbone.Broker
- Backbone.Unloader
Backbone.Composer
- Minimize boilerplate code
- Manage view lifecycle
- Simplify subview management
backbone.Broker
- Pub/Sub event aggregator based on channels
- Application wide singleton
Channels
var broker = require('broker');
var channel = broker.channel('session');
broker.channel
- Retrieves or creates a channel
Subscribe
var broker = require('broker');
broker.channel('session').subscribe('login', function(){
...
});
Subscribing to events on a channel
Publish
var broker = require('broker');
var view = new Backbone.View();
broker.channel('session').publish('show',view);
Publish an event to a channel
Dos and Don'ts
Do
- Send events between independent modules
Don't
- To replace existing model, collection and view events
Backbone.Unloader
- Dynamically load and unload routes
- Limit access to routes based on user rights
- Can be triggered based on broker events
Route Setup
var router = Backbone.Router.extend({
initialize: function(){
broker.channel('session').subscribe('login', function(){
this.loadRoutes({
'home': 'showHome',
'user/:id': 'showUser'
});
}.bind(this));
}
});
Load routes on logon
Unloading
var router = Backbone.Router.extend({
initialize: function(){
broker.channel('session').subscribe('logoff', function(){
this.unloadRoutes();
}.bind(this));
}
});
Make sure all routes are unloaded at logoff
More Information
- Repo - https://github.com/connectsolutions/csx-frontend.git
- Lib - app/common/backbone
Shameless Plug
- Please STAR the project
- Follow me on Github and @nancenick
CSX Application
By Nick Nance
CSX Application
- 1,125