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 (We are supporting jQuery, DOMAssistant, Prototype, MooTools and in addition you can also use Sizzle)
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>

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

Example 2 - Iteration on a Table

Player
Chloe

Source

<table id="players1" 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>

var context = ["Alice Keasler", "Charles LeGrand", "Gary Bitemning", "Helen Moren"];
$('#players1').autoRender(context);

Example 3 - Iteration on a List

Beebole

Source

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

var context = {
  "id": "3456",
  sites: [{ 
    "name": "Beebole", "url": "http://beebole.com"}, {
    "name": "BeeBuzz", "url": "http://beebole.com/blog/"}, {
    "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 id="players2" 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...';
  timer.begin('Loading data');
  var script = (button.id == 'b4_2') ? 'js/jsonBig.js':'js/jsonSmall.js';
  $.getJSON(script, function(context){
    timer.log('Rendering');
	var directive = {
	  'tbody tr[class]': function(arg){
	      var oddEven = (arg.pos % 2 == 0) ? 'even' : 'odd';
		  var firstLast = (arg.pos == 0) ? 'first' : (arg.pos == arg.items.length - 1) ? 'last' : '';
		  return oddEven + ' ' + firstLast;},
	  '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\'"}

    $('table.players.2').autoRender(context, directive);
	
	$('table.players.2').before(timer.end());
	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
P	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 class="row">
              <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(arg){
		return (arg.pos % 2 == 1) ? this.even : this.odd;}}
		
function lineNb(arg){
	return arg.pos+1;}

function render5(){
	var context = {
		'teams': [{
			'name':'Cats',
			'players':[	
				{"first":"Alice","last":"Keasler", "score":14}, 
				{"first":"","name":"", "score":0},
				{"first":"Vicky","last":"Benoit", "score":15}, 
				{"first":"Wayne", "last":"Dartt", "score":11}]},{

			'name':'Dogs',
			'players': [
				{"first":"Ray","last":"Braun", "score":14}, 
				{"first":"Aaron","last":"Ben", "score":24}, 
				{"first":"Steven","last":"Smith", "score":1}, 
				{"first":"Kim", "last":"Caffey", "score":19}]},{

			'name':'Mices',
			'players': [
				{"first":"Natalie","last":"Kinney", "score":16}, 
				{"first":"Caren","last":"Cohen", "score":3}]}]}

	var scoreBoard = $('table.scoreBoard').mapDirective({
		'tbody tr': 'team <- teams',
		'td.teamName': 'team.name'});

	var teamList = $('table.teamList', scoreBoard)
		.mapDirective({
			'tbody tr': 'player <- team.players',
			'td.player': '#{player.first} (#{player.last})',
			'td.score': 'player.score',
			'td.position+': lineNb, 
			'tbody tr[class]+': function(arg){ return row.decorator(arg) } });

	$('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');}