Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
very simple but powerful template engine for unobtrusive javascript
branch: master

This branch is even with mpapis:master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
javascript
.gitignore
README
index.html

README

Easy script to map json data to pure html tree.

Think of keys in JSON as jquery selectors, traversing down the tree sums them making selector for each data to render.

Simple example
html:
    <div class="users"><a class="name" href="#"></a> Age of: <span class="age"></span></div>

data:
  var users = [
    {'.name':'Ben','.name@href':'#/a','.age':24},
    {'.name':'Bob','.name@href':'#/b','.age':25},
    {'.name':'Brad','.name@href':'#/c','.age':26}
  ]

render:
  $('.users').render(users);

output:
  <div class="_pt_key4_0" class="users">
    <a href="#/a" class="name">Ben</a> Age of: <span class="age">24</span>
  </div><div class="_pt_key4_1" class="users">
    <a href="#/b" class="name">Bob</a> Age of: <span class="age">25</span>
  </div><div class="_pt_key4_2" class="users">
    <a href="#/c" class="name">Brad</a> Age of: <span class="age">26</span>
  </div>


Nested example
html:
  <div>
    <select id="opts">
      <optgroup label="">
        <option value=""></option>
      </optgroup>
    </select>
  <div>

data:
var options_selectors = [
  {'@label':'First','option':[
    {'':'A','@value':'1'},
    {'':'B','@value':'2'}
  ]},
  {'@label':'Second','option':[
    {'':'C','@value':'3'},
    {'':'D','@value':'4'}
  ]}
]

render:
  $('#options>optgroup').render(options_selectors);


data with mapping:
var options = [
  {group:'Third',list:[{name:'E',value:5},{name:'F',value:6}]},
  {group:'Forth',list:[{name:'G',value:7},{name:'H',value:8}]}
]
var options_map = {group:'@label',list:['option',{name:'',value:'@value'}]}

render:
  $('#options>optgroup').render(options,{map:options_map});


output (for selectors and mapping):
  <div id="options">
    <select id="server_opts">
      <optgroup class="_pt_key13_0" label="Third">
        <option class="_pt_key14_0" value="5">E</option><option class="_pt_key14_1" value="6">F</option>
      </optgroup><optgroup class="_pt_key13_1" label="Forth">
        <option class="_pt_key15_0" value="7">G</option><option class="_pt_key15_1" value="8">H</option>
      </optgroup>
    </select>
  </div>

Using template to render content:
In header section define html script (keep unique ids):
    <script id="entry_show_template" defer type="text/html">
      <div class="entry">
        Age: <span class="age"></span> <a class="name" href="#"></a>
      </div>
    </script>

In document body place the same as root of template:
    <div class="entry"></div>

Finally render users from first example:
    $('.entry').render(users,{template:'entry_show_template'});

Using templates allows to call render code many times on the same selector, for only once filling content no need of templates is needed.

Some additional information can be found on author page: http://niczsoft.com/tag/pure/
Something went wrong with that request. Please try again.