jQuery View
Introduction
jQuery View provides you a simple way to create Views and enhance your HTML.
You can use it like a jQuery plugin:
And enjoy its simple DOM-based template:
{{user}} You clicked {{clickCount}} times.
Checkout the example above in this pen: https://codepen.io/gsantiago/pen/jqLjzg
TODO Example
Check out a TODO List example here: https://codepen.io/gsantiago/pen/KzyYqw
Installation
npm install jquery-view --save-dev
Then just require it:
If you don't use NPM, then just copy dist/jquery-view.js
from this repo and include it in your project.
Usage
You can use it like a jQuery plugin:
var myView =
Or using the View constructor:
var myView = options
Options
Name | Type | Description |
---|---|---|
state | Object or Function | Default value for view's state. |
template | String | Optional template. |
templateUrl | String | Use an external template. |
beforeRender | Function | Callback called before rendering. |
afterRender | Function | Callback called after rendering. |
events | Object | Event binding similar to Backbone's Event Hash. |
init | Function | Callback called once the template is loaded. |
Each extra option passed will be attached to the instance like a method:
var view = view // `my extra method`
API
getState()
Return the current state.
setState(obj)
Extend the current state.
props
Object with view's attributes.
Template Engine
jQuery View provides a simple DOM-based template engine. Basically, you
can use {{myExpression}}
to print and evaluate expressions, and special
attributes called directives
to manipulate the elements.
It's heavily inspired by Angular's Templates, but it's much much simplier.
Here's an example:
Nº: {{$index + 1}} {{user.name}} Send email
Expressions
You can put your expressions between curly braces {{ }}
:
{{message}} {{ message.toUpperCase() }}
By default, the expressions are escaped.
If you want an unescaped result, use {% %}
instead of double curly braces.
{% unsafe_text %}
Directives
All directives begin with a colon :
:show
If expression given is false
, then the element is removed.
This element will not be present in the DOM. {{email}}
:hide
Similar to :show
. It will remove the element if the expression is truthy.
:bind
Replace the element's content by the expression given.
Name will show here8
:repeat
Create a loop similar to ng-repeat
from Angular.
{{$index}}: {{user.name}}
For each loop, :repeat
will provide special properties:
Variable | Type | Details |
---|---|---|
$index |
Number | Iterator's offset (0..length-1). |
$key |
Number or String | Item's index for arrays, or key for objects. |
$total |
Number | The collection's length. |
$first |
Boolean | true if the repeated element is first in the iterator. |
$middle |
Boolean | true if the repeated element is between the first and last in the iterator. |
$last |
Boolean | true if the repeated element is last in the iterator. |
$even |
Boolean | true if the iterator position is even (otherwise false). |
$odd |
Boolean | true if the iterator position is odd (otherwise false). |
It also supports nested :repeat
's:
My list: Name: {{user.name}} Skills: {{skill}}
:class
Pass a simple JavaScript Object with the class name as the key and an expression as the value. If the expression is truthy, the class is added:
<!-- myVariable = true -->
The element is rendered to:
:style
Inject an object as CSS inline:
Is rendered to:
Other directives
This template engine supports many other directives like
:href
, :disabled
, :checked
, :selected
. All of them are inspired
by Angular's default directives.
If you miss some directive, feel free to open an issue, send a PR or see the section below:
Custom Directives
The method addDirective
offers a simple way to create your own directives.
Here's a simple directive that let your text uppercase if the expression given is truthy:
$viewTemplate