You are here: System » JQueryPlugin » JQueryView

JQueryView

Homepage: http://www.jsviews.com
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 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!

Further reading

Syntax

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 http://www.jsviews.com/#jsvapi for lots of details and examples)

Notes

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