BaseView.js

Previous: Framework

BaseView is the foundation for the building of Backbone Views for our applications. It includes useful properties and methods that encapsulate functionality that tends to be needed over and over again. It owes a great debt to the SuperView presented by Rebecca Murphey at BackboneConf 2012.

Methods and properties on BaseView as of Keel 0.9 are as follows:

• elements (property)

  The elements array allows us to reference elements from our View templates from within our View. This is especially useful in that it allows us to place child Views within a parent View prior to appending it to the DOM.

• template (property)

  The template object is a placeholder that is used in the absence of a template explicitly-defined within concrete Views. Our default render method expects a template, so this placeholder prevents errors from occurring when initially creating a View. Each concrete View should implement its own template.

• constructor (method)

  We override the constructor method to add a children instance property so that each View has reference to all of its children Views. This allows the parent to destroy its children when it itself is destroyed.

• addChild (method)

  This method allows us to attach another View as a child of the current View. We pass an object into this method that acts as a child specification. This specification includes a reference to the View constructor for the child, a unique ID which serves as the key in the parent's list of its children, the element to which to attach the child View, and a Backbone View options object that is passed directly into the View instantiation (e.g. new ChildView( childSpec.options );).

• addChildren (method)

  This method accepts an array of specification objects, loops through them, and calls addChild on each one in order.

• destroy (method)

  This method destroys all children of the View and then calls the Backbone remove method, which removes the View from the DOM and calls stopListening to unbind events.

• destroyChild (method)

  This method finds the reference to the child View (by unique ID) in the map created in constructor, calls destroy on it, and removes the reference.

• destroyChildren (method)

  This method loops through an array of child View IDs, and calls destroyChild on each one.

• getTemplate (method)

  This is used by the render method. It takes care of caching or pre-rendering the template described in the View's template property.

• place (method)

  This method takes care of attaching our View to the DOM. It accepts two arguments: a DOM node in which to place the View, and an optional position: 'first', 'last', or 'only', which dictates whether to use the jQuery prepend(), append(), or html() methods. Defaults to 'last'.

• postPlace (method)

  This is a lifecycle callback method that is called after place. This allows us to attach functionality that must run after the View is in the DOM.

• postRender (method)

  This is a lifecycle callback method that is called after render, but before place. This allows us to run functionality that does not depend on DOM attachment just a little sooner.

• render (method)

  The default render method automatically empties the View, retrieves and applies the template (applying the View's designated model to it, if defined), then calls _setupElements and postRender.

• _setupElements (method)

  This method loops through our elements array and stores references to the FIRST matching DOM element, meaning that the .js-elementName pattern is treated like an id for all intents and purposes.

Next: ExceptionUtil.js