Backbone.Application
is simple and effective implementation of the MVC pattern for backbone.js. There are 3 base classes that gives that power to backbone:
- Backbone.Application
- Backbone.Controller
- Backbone.EventBus
To get started, lets create a new application instance. Backbone.Application
creates application sceleton automatically with all namespaces, that can be used for further definition of components.
new Backbone.Application({
nameSpace: 'SteakMaker'
});
In result we will have ready to use object that can host all part of the future app.
window.SteakMaker = {
...
Controllers: {},
Models: {},
Collections: {}
}
window.SteakMaker
is an instance of the Backbone.Application`.
console.log(SteakMaker instanceof Backbone.Application); // -> true
The application will automatically define namespace using nameSpace
config. Internal strcuture will be created based on 'allocationMap'
properties. THe default values of the 'allocationMap'
is the following:
allocationMap: {
model: 'Models',
collection: 'Collections',
controller: 'Controllers',
view: 'Views'
}
Fields model
, collection
, controller
and view
are required. We can redefine or extend internal structure by redefining allocationMap
config.
For example:
new Backbone.Application({
...
allocationMap: {
model: 'models',
collection: 'stores',
controller: 'controllers',
view: 'views',
lib: 'libs'
}
});
In result, our application will have the following structure:
window.SteakMaker = {
...
controllers: {},
models: {},
stores: {},
libs: {}
}
In order to use automated namespace generation we need to make sure that application instance is created right before all other resurses are being loaded.
Lets extend our example and add several controllers.
new Backbone.Application({
nameSpace: 'SteakMaker',
controllers: [
'MeatManager', // -> SteakMaker.Controllers.MeatManager
'Administration', // -> SteakMaker.Controllers.Administration
...
]
});
Please note, in controller definition we are using simple string identifier which doesn't contains SteakMaker.Controllers
. Using nameSpace
property, the application class will resolve refences to all required components. In order to keet it running, we need to use choosen namespace when defining all other components.
SteakMaker.Controllers.Administration = Backbone.Controller.extend({});
SteakMaker.Models.Steak = Backbone.Model.extend({});
SteakMaker.Views.Kitchen = Backbone.View.extend({});
Controllers are used to bind all application parts together. All they really do is listen for events (usually from views and other controllers) and take some action.
SteakMaker.Controllers.MeatManager = Backbone.Controller.extend({
models: [
'Meat',
...
],
collections: [
'Dishes',
...
],
views: [
'Kitchen',
...
],
initialize: function() {
...
}
});
Controller.initialize
function is a great place to setup controller event listeners. Simply call Controller.addListeners
function and pass the list of views in order to handle view events. In our example, let's listen for 'toolbar.action'
event from Kitchen
view:
SteakMaker.Controllers.MeatManager = Backbone.Controller.extend({
...
initialize: function() {
this.addListeners({
'Kitchen': {
'toolbar.action': this.toolbarAction
}
});
},
toolbarAction: function(action) {
// code here
}
});
Each controller has onLauch
callback which is great place to set up controller basics. Let's create Meat
model, then Kitchen
view and render it.
SteakMaker.Controllers.MeatManager = Backbone.Controller.extend({
...
onLaunch: function() {
var model = this.getModel('Meat');
var view = this.createView('Kitchen', {
model: model
});
view.render();
}
...
});
It's pretty much the same as original Backbone.View, but there are small difference. In order to enable controller level events, use View.fireEvent method instead of default View.fireEvent
. Let's see how we can fire up 'toolbar.action'
events from MeatManager
view in order to notify MeatManager
controller about that actions.
SteakMaker.Views.Kitchen = Backbone.View.extend({
events: {
'click .toolbar button': 'onToolbarButtonClick'
},
...
onToolbarButtonClick: function(event) {
var button = $(event.currentTarget),
action = button.data('action');
this.fireEvent('toolbar.action', [action]);
}
...
});
That's it! All controllers, that are listen for the Kitchen
events will know when it fire.
##Examples