Get Surprised

Discover our 6 examples and a totally new way of building web interfaces

Get Your Hands Dirty

Go to our download page and get the last version available
Copy the /pure directory somewhere on your web server or computer and create an empty html file in the directory to start playing with PURE.
You may also use our page allExamples.html as a starting point
Place a script tag in the <head> of your document with the src pointing to the location of the js/pure.js file
Place a script tag in the <head> of your document with the src pointing to a JS library of your choice (only jQuery is supported at this time and is provided within the /pure/js directory)
Build your HTML
Build your rendering JavaScript function
Render

Expert Already?

Read how to optimize your response time thanks to compilation
Visit our wiki for technical documentation
Get involved in the discussion and share with us your examples, your ideas, ...

Example 1 - Hello Who?

Hello World

Source

<div id="hello">
  Hello <span class="who">World</span>
</div>

function render1(){
  $('#hello').autoRender({ "who": "Mary" });}

Example 2 - Iteration on a Table

Player
Chloe

Source

<table class="players 1">
  <thead>
    <tr><th class="player">Player</th></tr>
  </thead>
  <tbody>
    <tr class="context">
	  <td class="player context">Chloe</td>
	</tr>
  </tbody>
</table>

function render2(){
  var context = ["Alice Keasler", "Charles LeGrand", "Gary Bitemning", "Helen Moren"];
  $('table.players.1').autoRender(context);}

Example 3 - Iteration on a List

Beebole

Source

<ol class="teamList id@id">
  <li class="player sites"><a class="name url@href" href="http://beebole.com">Beebole</a></li>
</ol>

function render3(){
  var context = {
    "id": "3456",
  sites: [{ 
    "name": "Beebole", "url": "http://beebole.com"}, {
    "name": "BeeLit", "url": "http://beeLit.com"}, {
    "name": "PURE", "url": "http://beebole.com/pure"}]};

  $('ol.teamList').autoRender( context);}

Example 4 - Passing JS Functions as a Directive (Iteration on a table zebra like and attach events)

In addition to the zebra iteration, this example shows a way to attach events by a directive.
Mouse over the lines of the rendered table, and click on a line.

Player
Chloe

Source

<table class="players 2">
  <thead>
    <tr>
      <th class="player">Player</th>
    </tr>
  </thead>
  <tbody>
    <tr class="context">
      <td class="player context">Chloe</td>
    </tr>
  </tbody>
</table>

function swapStyle(obj, inOut){
  obj.className = (inOut) ? 'player hover' : 'player';};

function clickLine(obj){ 
  alert(obj.innerHTML)};

function render4(button){
  button.value = 'loading data...';
  var script = (button.id == 'b4_2') ? 'js/jsonBig.js':'js/jsonSmall.js';
  $.getJSON(script, function(context){

  var directive = {
    'tbody tr td[onclick]':'"clickLine(this)"',
    'tbody tr td[onmouseover]': '"swapStyle(this, true);"', 
    'tbody tr td[onmouseout]' : '"swapStyle(this, false);"',
    'tbody tr td[style]':'\'cursor:pointer\'',
		
    'tbody tr[class]+': 
        function(context, items, pos){
          var oddEven =  (pos % 2 == 0) ? 'even' : 'odd';
          var firstLast = (pos == 0) ? 'first': (pos == items.length -1) ? 'last':'';
          return oddEven + ' ' + firstLast; }}

  $('table.players.2').autoRender(context, directive);

  button.value = 'Refresh the page to render again';});}

Example 5 - Nested Iteration

This was not explained in the examples. The objective here is to have a double iteration. First on teams, then on players.
It shows the nested iteration and as well how a template can be included in another.

Team Name

Position	Player	Score
1	Chloe	20

Source

<table class="scoreBoard">
  <tbody>
    <tr>
      <td class="teamName">Team Name</td>
        <td class="teamPlace">
        <table class="teamList">
          <thead>
            <tr>
              <th class="position">Position</th>
              <th class="player">Player</th>
              <th class="score">Score</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td class="position">1</td>
              <td class="player">Chloe</td>
              <td class="score">20</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

var row = {
  odd: 'odd',
  even:'even',
  decorator: function(context, items, pos){
    return (pos % 2 == 1) ? this.even : this.odd;}}
		
function lineNb(context, items, pos){
  return pos+1;}

function render5(){
  var context = {
    'teams': [{
        'name':'Cats',
        'players':[	
            {"name":"Alice Keasler", "score":14}, 
            {"name":"Mary Cain", "score":15}, 
            {"name":"Vicky Benoit", "score":5}, 
            {"name":"Wayne Dartt", "score":11}]},{
			
        'name':'Dogs',
        'players': [
            {"name":"Ray Braun", "score":14}, 
            {"name":"Aaron Ben", "score":24}, 
            {"name":"Steven Smith", "score":1}, 
            {"name":"Kim Caffey", "score":19}]},{
			
        'name':'Mices',
        'players': [
            {"name":"Natalie Kinney", "score":16}, 
            {"name":"Caren Cohen", "score":3}]}]}

  var scoreBoard = $('table.scoreBoard').$pMap({
    'tbody tr': 'team <- teams',
    'td.teamName': 'team.name'});
	
  var teamList = $('table.teamList', scoreBoard)
    .$pMap({
      'tbody tr': 'player <- team.players',
      'td.player': 'player.name',
      'td.score': 'player.score',
      'td.position': lineNb,
      'tbody tr[class]': function(context, items, pos){ return row.decorator(context, items, pos) } });
	
  $('td.teamPlace', scoreBoard).html(teamList);
  $p.compile(scoreBoard, 'f5');
  $('div#render5').html( $p.render('f5', context) );}

Example 6 - Recursive List

name

Source

<ul class="treeItem">
	<li class="children"><a class="name" href="#">name</a></li>
</ul>

function render6(){
	
  var context = {
    children: [{
      name:'Europe',
      children:[{
        name:'Belgium', 
        children:[{
          name:'Brussels'},{
          name:'Namur'},{
          name:'Antwerpen'}]},{
        name:'Germany'},{
        name:'UK'}]},{
      name:'America',
      children:[{
        name:'US',
        children:[{
          name:'Alabama'},{
          name:'Georgia'}]},{
        name:'Canada'},{
        name:'Argentina'}]},{
      name:'Asia'},{
      name:'Africa'},{
      name:'Antartica'}]};
      
  var directive = {
    'li+':function(context, items, pos){
      if(items[pos].children){
      return $p.compiledFunctions['tree'].compiled(items[pos]);}}};
				
  $('ul.treeItem').compile('tree', directive, context);
  $('ul.treeItem').render(context, 'tree');}