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.var data = [ { "name": "Robert", "nickname": "Bob", "showNickname": true }, { "name": "Susan", "nickname": "Sue", "showNickname": false } ]; var template = $.templates("#theTmpl"); template.link("#result", data);
<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>
Pretty cool!
{{:name}}
becomes this {^{:name}}
<button data-link="disabled{:disableButton} title{:theTitle} data-myvalue{:myVal} class{:disableButton ? 'class2' : 'class1'}">
<input data-link="{:name}" />
becomes this <input data-link="{:name:}" />
<input data-link="name" />
. The more explicit form is only necessary if you want to force it to one-way binding.)
<span data-link="name" contenteditable="true"></span>
$.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)