Anonymous avatar Anonymous committed c74a7d5

add the tutorial 7 file, with an example of how to build a plugin to run jquery effects after rendering

Comments (0)

Files changed (1)

tutorial/tuto7.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>
+
+		//example of building a plugin to postprocess the generated HTML
+		
+		$p.plugins.renderWithEffects = function(ctxt, directive, postProcess){
+			var sel, action, elms, 
+			replace_ = function(pobj){
+				return {
+					by:function(pobj2){
+						var i = 0;
+						pobj.length = Math.max(pobj.length, pobj2.length);
+						for(; i<pobj.length; i++){
+							if(typeof pobj2[i] !== 'undefined'){
+								pobj[i] = pobj2[i];
+							}else{
+								delete pobj[i];
+							}
+						}
+					}
+				}
+			};
+			this.render( ctxt, directive );
+			if(typeof postProcess !== 'undefined'){
+				for(sel in postProcess){
+					action = postProcess[sel];
+					if(typeof action === 'function'){
+						replace_( this ).by( this.find(sel) );
+						action.call(this);
+					}
+				}
+			} 
+			return this;
+		};
+		
+		//register it as a jquery extension
+		jQuery.fn.extend({
+			renderWithEffects:function(ctxt, directive, postProcess){ 
+				return jQuery( $p( this[0] ).renderWithEffects( ctxt, directive, postProcess ) ); 
+			}
+		});
+
+
+    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'}
+      ]
+    };
+
+	var effects = {
+		tr:function(){
+			var i = 0;
+			$(this).each(function(){
+				i++ % 2 ? $(this).fadeOut(3000) : $(this).hide(3000);
+			});
+		}
+	};
+
+    $('table').renderWithEffects(data, directive, effects);
+  </script>
+</body>
+</html>
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.