kist-backbone-view
Extends Backbone.View
with useful features.
Features:
- Subview managment: adding, getting and removing
- Optional Virtual DOM support for rendering
Install
npm install kist-backbone-view --save
Usage
Basic usage.
const View = ; const view = View;
Render placeholder and view assign usage.
const View = ; const view = View;
Virtual DOM variant usage.
const View = ; const view = View;
API
addSubview(view, key)
Adds subview to current view.
view
Type: Backbone.View
Subview to add to current view.
key
Type: String|Number
Subview key so it can be easily identified in subview collection. If undefined,
view’s cid
property will be used.
getSubview(key)
Gets subview referenced by key.
key
Type: String|Number
Key which is used to reference subview.
removeSubviews
Removes all subviews from current view.
getRenderPlaceholder
Returns view’s placeholder element which will be used in resolving for
assignSubview
.
assignSubview(key)
Replaces view’s render placeholder with real content (returned when running
render
method).
If you’re using renderDiff
for content rendering, explicit
call for this method is unecessary—it will be called for every subview which
rendered it’s placeholder with getRenderPlaceholder
.
key
Type: String|Number
Key which is used to reference subview.
renderDiff(content)
Renders virtual-dom
patches to current view’s element.
Available only for Virtual DOM implementation.
content
Type: String|Number|Element|jQuery
Content which should be diffed with current element and will be used to patch it.
fromTemplate
Type: Boolean
Should this view be fully constructed from template. Useful when you want to completely hold view representation inside template files (default Backbone behavior is to have root element outside template).
Available only for Virtual DOM implementation.
Virtual DOM
Optionally you can use virtual-dom
implementation of this module
to achieve performant rendering of your content. The difference in applying
template content is very subtle—instead of applying new content to DOM element
directly, you use convenient renderDiff
method.
Browser support
Tested in IE9+ and all modern browsers.
Test
For local automated tests, run npm run test:automated:local
(append :watch
for watcher support).
License
MIT © Ivan Nikolić