Permalink
Browse files

Add some tutorial files and merge version 2 to master

  • Loading branch information...
1 parent 6b0fe9d commit 80140d0b7a5cd73c5ac1370cdbe20fc52cc2c1d9 @beebole beebole committed Dec 5, 2009
Showing with 112 additions and 7 deletions.
  1. +1 −1 libs/pure.js
  2. +0 −3 tutorial/tuto1.html
  3. +0 −3 tutorial/tuto2.html
  4. +25 −0 tutorial/tuto4.html
  5. +36 −0 tutorial/tuto5.html
  6. +50 −0 tutorial/tuto6.html
View
@@ -131,7 +131,7 @@ $p.core = function(sel, ctxt, plugins){
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;
View
@@ -1,11 +1,8 @@
<html>
<head>
-
<title>PURE Unobtrusive Rendering Engine</title>
-
<script src="../libs/jquery.js"></script>
<script src="../libs/pure.js"></script>
-
</head>
<body>
View
@@ -1,11 +1,8 @@
<html>
<head>
-
<title>PURE Unobtrusive Rendering Engine</title>
-
<script src="../libs/jquery.js"></script>
<script src="../libs/pure.js"></script>
-
</head>
<body>
View
@@ -0,0 +1,25 @@
+<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>
View
@@ -0,0 +1,36 @@
+<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>
View
@@ -0,0 +1,50 @@
+<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>

0 comments on commit 80140d0

Please sign in to comment.