JQueryView

Homepage: http://www.jsviews.com
Author(s): Boris Moore
Version: 1.0.7

On this page:

Usage
Further reading
Syntax

This plugin adds JsViews functionality to the JsRender plugin. JsViews builds off of standard JsRender templates, but adds two-way declarative data-binding, MVVM, and MVP.

See JQueryRender and https://www.jsviews.com/#jsviews for more details.

Usage

In the SCRIPT head

var data = [
  {
    "name": "Robert",
    "nickname": "Bob",
    "showNickname": true
  },
  {
    "name": "Susan",
    "nickname": "Sue",
    "showNickname": false
  }
];

var template = $.templates("#theTmpl");

template.link("#result", data);

In the BODY

<div id="result"></div>

<script id="theTmpl" type="text/x-jsrender">
<div>
  Edit: <input type="checkbox" data-link="editable"/>
  <em>Name:</em> {^{:name}}
  {^{if showNickname && nickname}}
    (Goes by <em data-link="nickname"></em>)
  {{/if}}
  {^{if editable}}
    <div>
      <input data-link="name"/>
      <input data-link="nickname"/>
      Show nickname: <input type="checkbox" data-link="showNickname"/>
    </div>
  {{/if}}
</div>
</script>

See the demo

Pretty cool!

Syntax

JsViews templates are very similar to JsRender templates, but with minor changes to the tag structure.

For data-dependent linking, {{:name}} becomes this {^{:name}}
Tag attributes can also be data-linked: <button data-link="disabled{:disableButton} title{:theTitle} data-myvalue{:myVal} class{:disableButton ? 'class2' : 'class1'}">
If you are data-linking tags, you might be interested in two-way binding: <input data-link="{:name}" /> becomes this <input data-link="{:name:}" />
- (Actually, the default for <input> elements is two-way binding, so you can just use the shorthand <input data-link="name" />. The more explicit form is only necessary if you want to force it to one-way binding.)
You can also use this for contenteditable elements: <span data-link="name" contenteditable="true"></span>
As with JsRender, there is support for converters and helpers as well.

Other functionality includes the $.observe() method for assigning callback functions to respond to observable changes, and the $.view() method for retrieving the data slice associated with a particular View object.