Get unlimited public & private packages + team-based management with npm Teams.Learn more »

rearview

0.0.1 • Public • Published

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.

Keywords

none

Install

npm i rearview

DownloadsWeekly Downloads

1

Version

0.0.1

License

none

Last publish

Collaborators

  • avatar