tweak example some more

pugjs · Dec 28, 2011 · 11caa19 · 11caa19
1 parent e2f0040
commit 11caa19
Showing 1 changed file with 33 additions and 14 deletions.
diff --git a/examples/browser.html b/examples/browser.html
@@ -14,41 +14,60 @@
 
     function render(name, obj) {
       var html = template(name)
-        , fn = jade.compile(html)
-        , el = document.createElement('div');
+        , fn = render[name] = render[name] || jade.compile(html)
+        , table = document.createElement('table')
+        , tbody = document.createElement('tbody');
 
-      el.innerHTML = fn(obj);
-      return el.children[0];
+      table.appendChild(tbody);
+      tbody.innerHTML = fn(obj);
+      return tbody.firstChild;
     }
 
-    var pets = [];
+    var arr = []
+      , pets = [];
 
-    pets.push({ name: 'Tobi', species: 'Ferret', age: 2 });
-    pets.push({ name: 'Loki', species: 'Ferret', age: 1 });
-    pets.push({ name: 'Jane', species: 'Ferret', age: 5 });
+    arr.push({ name: 'Tobi', species: 'Ferret', age: 2 });
+    arr.push({ name: 'Loki', species: 'Ferret', age: 1 });
+    arr.push({ name: 'Jane', species: 'Ferret', age: 5 });
+
+    var n = 500;
+    while (n--) pets.push(arr[Math.random() * arr.length | 0]);
 
     onload = function(){
+      var start = new Date
+        , table = $('pets');
+
       pets.forEach(function(pet){
         var el = render('pet', { pet: pet });
-        document.body.appendChild(el);
+        table.appendChild(el);
       });
+
+      var duration = new Date - start;
+      $('duration').textContent = 'rendered ' + pets.length + ' in ' + duration + 'ms';
     };
     </script>
     <style>
       body {
         padding: 60px;
         font: 16px/1.6 "Helvetica Neue", Helvetica, Arial;
       }
-      h2 {
-        margin: 0;
+      table td.name {
+        font-weight: bold;
+      }
+      table td.description {
+        font-weight: 200;
+        letter-spacing: 1px;
       }
     </style>
   </head>
   <body>
+    <span id="duration"></span>
+    <table id="pets"></table>
+
     <script id="pet-template" type="text/template">
-.user
-  h2 pet.name
-  p #{pet.name} is a #{pet.age} year old #{pet.species}
+tr.pet
+  td.name= pet.name
+  td.description is a #{pet.age} year old #{pet.species}
     </script>
   </body>
 </html>