strictview
A set of common helpers and conventions for using as a base view for backbone applications.
It adds:
- Simple declarative property/template bindings without needing to include a template engine that does it for you. Which keeps your code with your code, you template as a simple function that returns an HTML string and your payload light.
- A pattern for easily including the view's base element into render. Rather than having to specify tag type and attributes in javascript in the view definition you can just include that in your template like everything else.
- A way to render a collection of models within an element in the view, each with their own view, preserving order, and doing proper cleanup when the main view is removed.
Install
npm install strictview
Usage
Basics
Nothing special is required, just use StrictView
in the same way as you would Backbone.View:
var MyView = StrictView;
Declarative Bindings
var MyView = StrictView;
Binding types:
classBindings
: Maintains a class on the element according to the following rules:
- If the bound property is a boolean: the name of the property will be used as the name of the class. The class will be on the element when true, and removed when the propety is false.
- If the property is a string: the current value of the property will be used as the class name. When the property value changes the previous class will be removed and be replaced by the current value. No other classes on that element will be disturbed.
textBindings
: Maintains the current value of the property as the text content of the element specified by the selector.
htmlBindings
: Just like textBindings
except html is not escaped.
srcBindings
: Binds to the src
attribute (useful for avatars, etc).
hrefBindings
: Binds to the href
attribute.
inputBindings
: Binds to the input
value.
attributeBindings
: Lets you create other arbitrary attributes bindings. For examlpe:
this would bind the model's id
attribute to the data-id
attribute of the span element.
js var View = StrictView.extend({ template: '<li><span></span></li>', attributeBindings: { // model property name : [ 'css selctor', 'attribute name'] id: ['span', 'data-thing'] } });
rendering collections
StrictView includes a renderCollection
method that works as follows:
// some view for individual items in the collectionvar ItemView = StrictView; // the main viewvar MainView = StrictView
That will maintain this collection within that container element. Including proper handling of add, remove, sort, reset, etc. You can optionally specify a filter function or choose to reverse the collection when rendering.
Also, when the parent view gets .remove()
'ed any event handlers registered by the individual item views will be properly removed as well.
Each item view will only be .render()
'ed once (unless you change that within the item view itself).
test coverage?
Why yes! So glad you asked :)
Open test/test.html
in a browser to run the QUnit tests.
Like this?
Follow @HenrikJoreteg on twitter and checkout my soon-to-be-released book: human javascript which includes a full explanation of this as well as a whole bunch of other stuff for building awesome single page apps.
license
MIT