Skip to content
robrobbins edited this page Mar 17, 2014 · 13 revisions

Unlike the base View class it comes from, the Dataview Object has some strong opinions about how it is used by observing some conventions.

###Data As usual per View classes there can be a data hash passed to a DataView as the 2nd argument in the constructor. The Dataview itself assumes the following about its data hash:

  • It contains a template.
  • There may be a renderTarget.
  • There may be a renderMethod.
  • There may be a renderOnAddedToParent.
  • There may be a renderOnModelChange.

####template

Dataviews hydrate the 'innerHTML' of this.el one of two ways:

  1. By being passed a change Record from an observed model. If the change argument is truthy in the render method (the only argument checked for) this will take precedence over this.data (see below). The change.object is passed to the compiled template

  2. By passing their 'data' hash to their template. The template value located in this Dataview's data hash can either be in string form, or already 'compiled' into a function.

####renderTarget

Any argument suitable for al "el" is acceptable (see setEl). On render, If a renderTarget is found the Dataview injects its el there via its renderMethod. This will happen only once as the Dataview then deletes the renderTarget from its model. If during its lifecycle the Dataview is removed from the renderTarget (or a new target is desired) simply set a renderTarget into the Dataview's model and it will place itself there on the next call to render.

If no renderTarget is present the Dataview assumes it is already in its intended location.

####renderMethod

Any legal DOM 'manipulation' method name (string). Defaults to "appendChild" if not found.

####renderOnModelChange

The Dataview implements the observable extension and, if renderOnModelChange is present (and truthy), observes the model it expects to be at this.data.model (the 'model' prop was present in the initial hash passed to the DataView). Any change (a set(s), unset(s) operation) to this model will trigger a call to render.

###render([change])

A method on the Dataview prototype that, when called, passes the Dataview's data hash (or change.object) through its template - rehydrating the innerHTML of this.el. This method is called automagically from:

  1. This object's addedToParent method (which is called from any container adding this object via addChild) if renderOnAddedToParent is truthy.
  2. This object's model when set(s) or unset(s) are called if renderOnModelChange is truthy.

render may be manually called at any time, returns this.

###addedToParent(parent)

Called from any container adding this object via addChild. Calls bindEvents, then:

  • Returns this.render() if renderOnAddedToParent is truthy
  • Sets this.observer as a callback on its own model bound to this.render if renderOnModelChange is truthy.

Returns this

###removedFromParent

The Dataview implementation of this method unbinds its events, removes itsel from the DOM, and if this.observer is present use it to remove itself from this.models list of callbacks, as well as remove said observer.

Clone this wiki locally