https://github.com/toddself/rearview
https://github.com/toddself/rearview
Last synced: over 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/toddself/rearview
- Owner: toddself
- Created: 2014-02-17T16:28:07.000Z (over 12 years ago)
- Default Branch: master
- Last Pushed: 2014-03-11T01:21:56.000Z (over 12 years ago)
- Last Synced: 2025-03-15T05:12:04.428Z (over 1 year ago)
- Language: JavaScript
- Homepage: A Backbone View extension that allows for server side rendering via JSDom
- Size: 184 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](http://travis-ci.org/toddself/rearview)
# 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.