When think about big Js projects I often need to pack some behaviors together then add to multiple classes. I often need this with views.
BackboneJS itself offer no solutions to accomplish this stuff but I’m a curious person so I started to surf and read then I found this git. That inspired me.
I think it’s time to add a “plugin” concept to the BackboneJS library. I did it in my BackboneKit project but I hope someone else will code it better!
A Running Example
Here I define an object with a property, a method and a family of methods named “before” and “after”.
This object can do nothing by itself!
var myPlugin = {
prop: 'this is an internal property',
foo: function() {
console.log( this.prop );
},
before: {
render: function() {
console.log( 'before render logic')
}
},
after: {
initialize: function() {
console.log( 'after initialize logic' );
}
}
};
Here I define a custom view by extending BackboneJS’s View object. This view does nothing else than write something to the console when initialize and render.
Please note at the plugin configuration key. It contains an array of pluggable objects.
var myView = Backbone.View.extend({
plugins: [ myPlugin ],
initialize: function() {
console.log( 'initialize logic' );
},
render: function() {
console.log( 'render logic' );
return this.el;
}
});
Finally I use my custom view to create and run a view instance. I can call render() method as normal… but I can call plugin’s foo() method too.
var myViewInstance = new myView(); myViewInstance.render(); myViewInstance.foo();
A Good Way to Inject Code
Backbone.Kit’s View Plugin is a good way to add logic to existing objects or to inject logic into existing object’s methods.
All the properties and methods defined into the plugin are applied to the target object as default values. That means a plugin is not able to override an object!
!!! If you want to override a target method you can define a before::method in your plugin then return a non-null value.
Plugin :: before {}
The before key collect methods to be executed BEFORE the relative target logic.
If your target::render() logic use a model.toJSON() instruction and you want to change a model’s property you can to it with a piece of code like:
var myPlugin = { before: { render(){
this.model.set( 'prop-name', 'custom-value' );
}}}
Your before-logic methods should return nothing. If you return something (non null value) target logic (and after logic) is not executed.
Any returned value is used as original method return value!
Plugin :: after {}
The before key collect methods to be executed AFTER the relative target logic.
The simplest stuff is to add a class to the view’s DOM node:
var myPlugin = { after: { render() {
this.$el.addClass( 'plugin-class' );
}}};
Your after-logic methods should return nothing. If you return something (non null value) you replace the original return value then prevent other plugins logic to be executed.
plugin[] property Inheritance
If you use to create a layered components structure where each components are extensions of another, more general, one you know inheritance.
BackboneJS’s extend() method take every property or methods in the extension overriding the parent object.
BackboneKIT alter this behavior for the plugin property by adding extension’s plugins to the parent’s plugins list.
var myContainer = Backbone.View.extend({
plugins: [ 'plugin1' ]
});
var myPanel = myContainer.extend({
plugins: [ 'plugin2' ]
});
// myPanel plugins:
// [ 'plugin1', 'plugin2' ]
