Commits

mic  committed 14a1b4c

Add some tutorial files and merge version 2 to master

  • Participants
  • Parent commits b88f29a

Comments (0)

Files changed (6)

File libs/pure.js

 		return leaf;
 	};
 	
-		// default find using querySelector when available on the browser
+	// default find using querySelector when available on the browser
 	function find(n, sel){
 		if(typeof n === 'string'){
 			sel = n;

File tutorial/tuto1.html

 <html>
 <head>
-
 	<title>PURE Unobtrusive Rendering Engine</title>
-
 	<script src="../libs/jquery.js"></script>
 	<script src="../libs/pure.js"></script>
-
 </head>
 <body>
 

File tutorial/tuto2.html

 <html>
 <head>
-
 	<title>PURE Unobtrusive Rendering Engine</title>
-
 	<script src="../libs/jquery.js"></script>
 	<script src="../libs/pure.js"></script>
-
 </head>
 <body>
 

File tutorial/tuto4.html

+<html>
+<head>
+  <title>PURE Unobtrusive Rendering Engine</title>
+  <script src="../libs/jquery.js"></script>
+  <script src="../libs/pure.js"></script>
+</head>
+<body>
+
+  <!-- HTML template -->
+  <div class="template">
+    Hello <a></a>
+  </div>
+
+  <script>
+    var data = {'who':'BeeBole!', site:'http://beebole.com'},
+        directive = {
+          'a':'who', //look for the tag 'a' and place the value of the property 'who' in its node value
+          'a@href':'site' //look for the tag a, and set its attribute 'href' to the value of the property 'site'
+        }
+
+    //note the use of render instead of autoRender and the 2nd parameter with directive
+    $('div.template').render(data, directive);
+  </script>
+</body>
+</html>

File tutorial/tuto5.html

+<html>
+<head>
+  <title>PURE Unobtrusive Rendering Engine</title>
+  <script src="../libs/jquery.js"></script>
+  <script src="../libs/pure.js"></script>
+</head>
+<body>
+  <!-- HTML template -->
+  <ul>
+    <li></li>
+  </ul>
+
+  <script>
+    var data = {
+      animals:[
+        {name:'bird'},
+        {name:'cat'},
+        {name:'dog'},
+        {name:'mouse'}
+      ]
+    };
+
+    //declaration of the actions PURE has to do
+    var directive = {
+      'li':{
+        'animal<-animals':{
+          '.':'animal.name'
+        }
+      }
+    };
+
+    // note the use of render instead of autoRender
+    $('ul').render(data, directive);
+</script>
+</body>
+</html>

File tutorial/tuto6.html

+<html>
+<head>
+  <title>PURE Unobtrusive Rendering Engine</title>
+  <script src="../libs/jquery.js"></script>
+  <script src="../libs/pure.js"></script>
+  <style>
+    .even td { background : #DDD }
+    .odd  td { background : #FFF }
+  </style>
+</head>
+<body>
+  <!-- HTML template -->
+  <table>
+    <tr>
+      <td></td>
+    </tr>
+  </table>
+
+  <script>
+    var directive = {
+    'tr' : { //trigger a loop
+      'animal<-animals' : { // loop on the property animals in the JSON 
+       '@class+':function(arg){ // add(+) the return value of the function to the class
+        var oddEven, firstLast;
+        oddEven = (arg.pos % 2 == 0) ? ' even' : ' odd';
+        firstLast = (arg.pos == 0) ? 
+         ' first' : 
+         (arg.pos == arg.animal.items.length - 1) ? 
+          ' last' : 
+          '';
+        return oddEven + firstLast;
+       },
+       'td':'animal.name'
+       }
+     }
+    };
+
+    var data = {
+      animals:[
+        {name:'bird'},
+        {name:'cat'},
+        {name:'dog'},
+        {name:'mouse'}
+      ]
+    };
+
+    $('table').render(data, directive);
+  </script>
+</body>
+</html>