Backbone.base is a collection of helper classes and common logic useful when developing backbone applications. Specifically, this project contains:
- BaseView
common view class implementing subviews management (adding/removal, lifecycle management)
- BaseModel
base model classes implementing safe(deep) cloning of attribute sets when exporting the viewmodel for the template (to avoid accidental tainting of the model)
Install the library via NPM (you'll need browserify or wrapup in order to compile the final JS for the browser in your build process):
npm install backbone.base
Simply require backbone.base into your files. you'll get an aggregate object containing:
{ Model: (export of BaseModel class), View: (export of BaseView class) }
The view class exported by backbone.base will give you automatic subview lifecycle management. The view class automatically listen to changes in the model and renders; When instanced, the class can be provided with a 'model' or 'collection' attribute and will render (and listen for changes) accordingly; if both 'model' and 'collection' properties are provided, the view will listen for both of them. The class exports also the following 'hooks' functions:
- serialize() : json
this function automatically transform the model/collection (or both, if present) into a JSON aggregate ready for rendering into the template. If only a model is provided to the view, the outcome of this function will be a JSON object containing a 'model' property with the JSON representation of the model. If only a collection is provided to the view, the outcome of this function will be a JSON object containing a 'collection' property with the JSON representation for the collection. If both a 'model' and 'collection' are provided, the JSON object returned from this function will have both a 'model' and 'collection' properties. the outcome of this function is passed to the 'augmentViewModel' function;
- augmentViewModel(json) : json
this function receive the JSON aggregate from 'serialize' and simply proxies it to the template. This hook is provided to allow the developer to 'augment' the view model before passing it to the template (useful if you want to add view helpers functions to the template).
The base view class provides also a few useful functions:
- renderSubviews
this empty function is called at the end of the render cycle; it's useful if you want to render subviews into your template with the confidence of knowing that the markup will be there.
- setSubview(name, selector, view)
this function lets you "add" a subview to your template, using the provided selector as the insertion point. the 'name' parameter is just a mnemonic you can use to later retrieve this view instance. the 'view' parameter is the instance of the view you want to add to the base view. This function will store the view into an internal lookup table and will render it.
- getSubview(name)
lets you retrieve the view you previously added to the base view using 'setSubview'
- storeSubview(name, view)
Useful if you want to just 'store' the subview into the internal lookup table, to take advantage of lifecycle management.
The following hooks are automatically called if defined in your view extending Backbone.base.View :
- beforeRender
Called at the start of the render cycle, even before any model serialization is applied. - afterRender
Called after 'renderSubviews', just before exiting the render cycle.
Internal functions not normally used by the developer (but still available if necessary) are:
- cleanSubview(name)
Remove the subview identified by the provided name and clean its reference from the internal lookup table.
- cleanSubviews
Remove all the subviews stored into the internal lookup table