Rearview

A Backbone view implementation that allows for server-side and client-side rendering. Allows for use with Backbone models/collections or POJOs either attached to the view or passed in at render time.

Installation

npm install rearview

Usage

> var Rearview = require('rearview');
> var View = Rearview.extend({
  tmplFn: function(){
    return 'hi';
  }
});
> var v = new View();
> v.render()
'<div>hi</div>'

Options

When you call Rearview#extend, here are some options you can set in addition to the normal ones Backbone provides. If you provide a function which already exists on Rearview, the functions will be composed into a wrapper function, allowing both functions to exist courtesy of deepestMerge.

tmplFn [required]

A function which returns your template function. The returned template function will be passed one argument, the current data context, and must return a string of HTML.

#setTemplate()

/**
 * Sets up the template for a given template
 * @method setTemplate
 * @memberOf BaseView
 * @param  {function} template_data A template function which accepts a context and returns a string which represents the compiled template merged with the context
 * @return {object}           undefined
 */

#attachChildren()

/**
 * Creates child view(s) and generates the HTML. If this view has not yet
 * rendered, it caches them along with the selector to which they should
 * be attached. If the view is rendered, it attaches them after render
 * @method attachChild
 * @memberOf BaseView
 * @param  {object} View        The view to instantiate
 * @param  {object} Model       A model of data for the view
 * @param  {string} [$selector] The selector to which the view should be attached
 * @param  {object} [options]   A key-pair list of options to additionally pass-in
 * @return {object}          undefined
 */

#setParentView

/**
 * Sets a reference to the parent view on the child so the child can listen
 * to the parent appropriately
 * @memberOf BaseView
 * @method setParentView
 * @param {object} parent The parent view
 */

#render

/**
 * Default render instance; gets template, serializes data and attaches
 * the rendered element to the cached `this.$el` reference.
 * @memberOf BaseView
 * @method render
 * @param  {object} data   object to be passed into serializeData
 * @param  {boolean} merge Extend or override local model data. Merging provided by [deepestMerge](/toddself/deepst-merge)
 * @return {string}        Returns the HTML string generated by the render
 */

Events

• pre-render [both]: fired before the context is passed into the template function and the HTML returned.
• pre-server-render [server]: fired only on the server before pre-render.
• pre-client-render [client]: fired only on the client before pre-render.
• post-render [both]: fired after the HTML is generated and attached to the current cached this.$el. caveat: Does not actually place the HTML into the DOM unless el is specified (and exists in window.document before view instantiation.)
• post-server-render [server]: fired only on the server before post-render but after the HTML is generated and attached.
• post-client-render [client]: fired only on the client before post-render but after the HTML is generated and attached.
• data-dirtied [both]: fired when the model or collection attached to the view is altered.
• data-cleaned [both]: fired when the changed data has been rendered into the cached this.$el reference
• view-closing [both]: notifies the current view that it should clean itself up and close
• child:close [both]: notifies all attached children views that they should clean themselves up and close

Method Stubs

These methods exist but are implemented as no-ops so you can provide custom methods for these

• preClientRender: works similar to the event. Allows for something to be done synchronously in the render pipeline.
• preServerRender: works similar to the event. Allows for something to be done synchronously in the render pipeline.
• preRender: works similar to the event. Allows for something to be done synchronously in the render pipeline.
• postClientRender: works similar to the event. Allows for something to be done synchronously in the render pipeline.
• postClientRender: works similar to the event. Allows for something to be done synchronously in the render pipeline.
• postRender: works similar to the event. Allows for something to be done synchronously in the render pipeline.
• dereferenceChild: Run on a parent view when a child view closes itself.