masseuse

Namespace: masseuse/BaseView

masseuse/BaseView

A View that adds lifecycle methods to Views that are optionally async using jQuery promises. Adds support for adding child Views

The BaseView is a custom extension of Backbone.View with some built in functionality and a defined life cycle. The life cycle methods can be run either synchronously or asynchronously.

To initialize a BaseView, there are several choices of options to pass in.

The life cycle has three main parts: beforeRender, render, and afterRender. beforeRender and afterRender are noops by default. If they are defined with zero arguments, they are executed synchronously. If they are defined with one argument, then a $.Deferred is passed in as that argument, and the life cycle doesn't continue until that $.Deferred is resolved. The render method uses the same convention.

beforeRender : function() {  synchronous  },
beforeRender : function($deferred) {  must resolve or reject $deferred  }

The lifecycle is started with view.start(). This returns a promise. During the life cycle the promise is notifed with: beforeRenderDone, renderDone, and afterRenderDone.

Child views are rendered during a parent views `afterDone`. The views start promise is not resolved until
all the
children's promises are resolved. Children can be nested arbitrariluy deep. Child views can be added
before start using

parent.addChild(child).

Source:

Methods

addChild(childView)

Add a child view to the array of this views child view references. The child must be started later. This happens in start or manually.

This method can take either a view instance or options for a view.

If options for a view are passed in, then BaseView is the default ViewType. The ViewType can be declared on the options.ViewType.

Parameters:
Name Type Description
childView
Source:

addChildren(childView)

Add multiple child views. The method receives either an array of views to be added or is called with all the views to be added.

Parameters:
Name Type Description
childView
Source:

appendOrInsertView($startDeferred)

Parameters:
Name Type Description
$startDeferred
Source:

bindEventListeners(bindingsArray)

bindEventListeners Bind all event listeners specified in and 'options.listeners' using 'listenTo'. Either option.bindings or options.listeners can be used.

Parameters:
Name Type Description
bindingsArray

(Array[Array]) - A collection of arrays of arguments that will be used with 'Backbone.Events.listenTo'
Source:

constructor(options, useDefaultOptions)

The constructor of BaseView overrides the default BB constructor, so that the options object can be created and applied to this.el before this.initialize is called.

  • name - convenience name string for debugging - will be available on the view instance appendTo - if set and el is not set then the view will be appended to this eleeent. appendTo can be a sizzle selector, a DOM element, or a jQuery object bindings - declarative syntax to setup view listeners array of arrays each sub array contains: what to listen to, the event, and the callback view context is assumed
bindings : [
['model', 'change:price', 'showNewPrice'],
['model', 'change:discount', 'animateAdvertisement']
],
  • defaultOptions - the options to be used as the default. Passed in options will extend this.
  • ModelType - if supplied, this.model will be of type ModelType - default is MasseuseModel
  • modelData - if supplied, this.model will be initialized with, this.model.set(modelData)
  • ViewContext - Convenience helper to acces the view context from within modelData
  • this helps in separating view options and view definitions into separate AMDs
modelData : {
           viewId : ViewContext('cid')
       }
  • template - String to be used as the umderscore template
  • viewOptions - list of keys for which each key value pair from options will be transferred to the view instance
var view = new BaseView({
   name : 'MyName',
   appendView : false,
   ModelType : MyCustomModel,
   modelData : { ... },
   bindings : [
       ['model', 'change:price', 'showNewPrice'],
       ['model', 'change:discount', 'animateAdvertisement']
   ],
   templateHtml : '<div><%= price %> : <%= discount %></div>',
       // Underscore templating that will - if provided - be turned into this.template using
       _.template(templateHtml)

});
Parameters:
Name Type Description
options
useDefaultOptions
Source:

dataToJSON() → {Object|string|*}

Source:
Returns:
Type
Object | string | *

initialize(options)

Parameters:
Name Type Description
options
Source:

refresh() → {$promise}

Remove this view and all its children. Then restart them all.

Source:
Returns:
Type
$promise

refreshChildren()

Remove all children and restart them.

Source:
Returns:

$promise - will be resolved once all children are restarted

remove()

Removes this view and all its children. Additionally, this view removes itself from its parent view.

Source:

removeAllChildren()

Remove all children from the parentView.

Source:

removeChild(childView)

Remove one child from the parentView.

Parameters:
Name Type Description
childView
Source:

render()

Source:

start($parentRenderPromise) → {jQuery.promise}

Wrapper method for lifecycle methods. Life cycle event are notifed both throw the progress returned by this method's promise, and by events triggered on the view. So - for example - plugins can hook into life cycle events.

In order, this method:

  • Calls this.beforeRender()
  • Starts any child views
  • Notifies that beforeRender is done
  • If the view has a parent, waits for its parent to render
  • Calls this.render()
  • Notifies that render is done
  • Calls this.afterRender()
  • Notifies that afterRender is done
  • Resolves the returned promise
Parameters:
Name Type Description
$parentRenderPromise jQuery.promise

If passed in, the start method was called from a parent view start() method.
Source:
Returns:

A promise that is resolved when when the start method has completed

Type
jQuery.promise