Code Monkey home page Code Monkey logo

backbone.base's Introduction

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

backbone.base's People

Stargazers

Sean Gravener avatar

Watchers

James Cloos avatar Davide Alberto Molin avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.