You are here: System » JQueryPlugin » JQueryView


Author(s): Boris Moore
Version: 0.9.90

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 for more details.


In the SCRIPT head

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

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

In the BODY

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

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

See the demo

Pretty cool!

Further reading


JsViews templates are very similar to JsRender templates, but with minor changes to the tag structure.
  • For data-dependent linking, (3) 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.

(see for lots of details and examples)


1 : /if

2 : /if

3 : :name

This site is powered by FoswikiCopyright © by the contributing authors. All material on this site is the property of the contributing authors.
Ideas, requests, problems regarding AustLII Communities? Send feedback
This website is using cookies. More info. That's Fine