# rearview
> A backbone view implementation that supports server side rendering
Latest version **0.0.1** (published 2014-02-18) · MIT license · 0 weekly downloads
## Install
```sh
npm install rearview
pnpm add rearview
yarn add rearview
bun add rearview
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.0.1 |
| Published | 2014-02-18 |
| First published | 2014-02-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Known vulnerabilities | 0 (+4 in 1 direct dependencies) |
| Install scripts | yes |
| GitHub stars | 1 |
| Author | Todd Kennedy |
| Maintainers | toddself |
## Links
- npm: https://www.npmjs.com/package/rearview
- Repository: https://github.com/toddself/rearview
- Issues: https://github.com/toddself/rearview/issues
- npm.io page: https://npm.io/package/rearview
## Dependencies (3)
- [jsdom](https://npm.io/package/jsdom.md) ~0.10.1
- [jquery](https://npm.io/package/jquery.md) ~2.1.0
- [backbone](https://npm.io/package/backbone.md) ~1.1.0
## Recent versions
- 0.0.1 (latest) — 2014-02-18
- 0.0.0 — 2014-02-17
## README
# Rearview
A [Backbone](http://backbonejs.com) 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
```javascript
> var Rearview = require('rearview');
> var View = Rearview.extend({
tmplFn: function(){
return 'hi';
}
});
> var v = new View();
> v.render()
'hi
'
```
## 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](/toddself/deepest-merge).
### `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.
---
_Source: https://npm.io/package/rearview · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._