Skip to content

Essential View lifecycle management and common model classes

Notifications You must be signed in to change notification settings

dmolin/backbone.base

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

23 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Backbone.base

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)

How to use it

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)
}

Using Backbone.base.View

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.

lifecycle functions

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

About

Essential View lifecycle management and common model classes

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published