Backbone.Supercharger is a library intended to supercharge your Backbone application. This is a library and not a framework, it will not provide code structuring of any kind.
- It provides messaging channels, courtesy of Backbone.Radio
- Handles view lifecycle management
- Command, PubSub & Request/Reply
- Supercharged Backbone.View's
Backbone.Supercharger utilizes Backbone.Radio from the MarionetteJS team. Backbone.Radio documentation
With plain 'ol Backbone managing your views is something you need to handle yourself. Leaving views "dangling" might cause some serious memory leaks. We fixed this problem by allowing you to register a subview within your parent View. Calling view.remove() on your parent View triggers the remove() function on all registered subviews.
We also improved the remove function. All the references stored inside a View are deleted, making it easier to GC (Garbage Collect).
Design patterns are the heart of every well written application. The Command, PubSub & Request/Reply patterns are deeply integrated within Backbone.Supercharger. See the API section for more information
We added some extra functions to the default Backbone.View, making it more robust and easier to use in larger projects.
- Backbone.View
- Backbone.Class
- Backbone.Collection
- Backbone.Model
- Backbone.Router
- Backbone.mediator
- Backbone.decorators
Triggers a 'added-to-dom' event on it's children and on itself. A 'removed-from-dom' event is fired upon remove. All subviews added after this view is added to DOM, will also have the addedToDOM function called.
var mainView = new Backbone.View(),
subview = new Backbone.View();
mainView.addedToDOM();
mainView.append(subview);
mainView.isAddedToDOM; //true
subview.isAddedToDOM; //trueRenders and appends the passed View to the Views element. The appended views is also registered as a subview. Triggers a 'appended' event on the subview.
Backbone.View.extend({
render: function () {
this.append(new SubView(), {
region: '.my-region',
render: true,
replace: true,
name: 'my-subview',
addMethod: 'append'
});
}
});Default is the root of the parent view.
- QuerySelector
- DOM element
- jQuery element
Default is true. Passing false will not call the render() function on the subview
Default is false. If you try to append a subview with a name that is already registered a Error is thrown. Passing true will overwrite (and remove) a already registered subview with the same name.
Default is the views cid.
Default is 'append' You can overwrite the method used to append the subview.
Returns a Backbone.Radio.Channel
Backbone.View.extend({
intialize: function () {
this.channel('my-channel').request('user');
}
});An array with keys representing variables that will be picked from the instantiation object and added to view.
var MyView = Backbone.View.extend({
optionNames: ['myVar']
});
var view = new MyView({
myVar: 'test'
});
view.myVar; //testA string or a function (returning a string) which represents a className which should always be added to your view.
var MyView = Backbone.View.extend({
persistentClassName: 'fixed-class',
className: 'blue'
});
var view = new MyView({
className: 'red'
});
view.el.className; //fixed-class redSimilar to append() but prepends instead of appending. See append() for more info.
Default is append You can overwrite the method used to append the template.
Like the Backbone events object, the subscriptions hash allows you to specify PubSub events in which you are interested. The listeners are automatically removed when removing the view.
Backbone.View.extend({
subscriptions: {
"window": {
"resize": "handleResize"
}
},
handleResize: function (event) {}
});Set the (combined) className on the element. Combines persistentClassName with className. The className param is optional. If you don't provide it, the views className (function) will be used.
The template which needs to be rendered by the view. Because of the async nature of some templating libraries, a 'render-complete' event is fired when the template is done rendering. The innerHTML of the template is added to the view.
Backbone.View.extend({
template: _.template("hello: <%= name %>"),
renderMethod: 'append'
});Trigger a bubbling event from the view to it's parents. You can also use this.listenTo(). Note: bubbling events are only available after a child has been appended to it's parent.
var ParentView = Backbone.View.extend({
bubble: {
'triggered-by-child': 'onTriggeredByChild'
},
onTriggeredByChild: function (value) {
console.log(value);
}
}),
ChildView = Backbone.View.extend({
initialize: function () {
this.listenTo(this, 'appended', this.triggerBubbleEvent);
},
triggerBubbleEvent: function () {
this.triggerBubble('triggered-by-child', 'test');
}
}),
parent = new ParentView();
parent.append(new ChildView()); //output: testTrigger a capture event from the view onto it's children. You also use this.listenTo().
var ChildView = Backbone.View.extend({
capture: {
'triggered-by-parent': 'onTriggeredByParent'
},
onTriggeredByParent: function (value) {
console.log(value);
}
}),
ParentView = Backbone.View.extend({
initialize: function () {
this.append(new ChildView());
this.triggerCapture('triggered-by-parent', 'test');
}
});
new ParentView(); //output: testBackbone.Class is a simple Backbone object providing you with Backbone's way of inheritance.
Backbone.Class.extend({
initialize: function () {}
});We have made a few tweaks to Backbone.Collection
Cancel an ongoing XHR request
Fetch now returns a promise which is resolved with the collection as attribute.
var collection = new Backbone.Collection();
collection.fetch().then(function (collection) {
console.log(collection);
});
collection.xhr; //Original XHR requestWe have made a few tweaks to Backbone.Model
Cancel an ongoing XHR request
Fetch now returns a promise which is resolved with the model as attribute.
var model = new Backbone.Model();
model.fetch().then(function (model) {
console.log(model);
});
model.xhr; //Original XHR requestSave now returns a promise which is resolved with the model as attribute.
var model = new Backbone.Model();
model.save({key: 'value'}).then(function (model) {
console.log(model);
});
model.xhr; //Original XHR requestWe've added two events 'pre-route' & 'post-route'
Returns a Backbone.Radio.Channel
Backbone.mediator.channel('my-channel').request('user');With these decorators you can extend every object with PubSub, Command & Request/Response pattern.
var obj = {};
_.extend(obj, Backbone.decorators.Command);var obj = {};
_.extend(obj, Backbone.decorators.PubSub);var obj = {};
_.extend(obj, Backbone.decorators.RequestResponse);