Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

speaking nAtive! :D

  • Loading branch information...
commit 5225a36ef25a125759fb75ee5d8abd1c6518e56e 1 parent 200e10d
Jens Bissinger authored March 26, 2010

Showing 1 changed file with 87 additions and 21 deletions. Show diff stats Hide diff stats

  1. 108  tutorial/tuto6.html
108  tutorial/tuto6.html
@@ -12,28 +12,12 @@
12 12
   <!-- HTML template -->
13 13
   <table>
14 14
     <tr>
15  
-      <td></td>
  15
+      <td class='red'></td>
  16
+      <td class='green'></td>
16 17
     </tr>
17 18
   </table>
18  
-
  19
+  <a class='lo'>lala</a>
19 20
   <script>
20  
-    var directive = {
21  
-    'tr' : { //trigger a loop
22  
-      'animal<-animals' : { // loop on the property animals in the JSON 
23  
-       '@class+':function(arg){ // add(+) the return value of the function to the class
24  
-        var oddEven, firstLast;
25  
-        oddEven = (arg.pos % 2 == 0) ? ' even' : ' odd';
26  
-        firstLast = (arg.pos == 0) ? 
27  
-         ' first' : 
28  
-         (arg.pos == arg.animal.items.length - 1) ? 
29  
-          ' last' : 
30  
-          '';
31  
-        return oddEven + firstLast;
32  
-       },
33  
-       'td':'animal.name'
34  
-       }
35  
-     }
36  
-    };
37 21
 
38 22
     var data = {
39 23
       animals:[
@@ -44,7 +28,89 @@
44 28
       ]
45 29
     };
46 30
 
47  
-    $('table').render(data, directive);
  31
+    var directive = {
  32
+      'table': {
  33
+        animals: function(context, idx, animal){ return {
  34
+          'tr': {
  35
+            '.red': animal.name
  36
+          }
  37
+        }}
  38
+      }
  39
+    };
  40
+
  41
+    var clone = function(obj) {
  42
+      return eval(uneval(obj));
  43
+    };
  44
+
  45
+    var render = function(context, property) {
  46
+      // TODO support @attr and others..  
  47
+      switch ( context.type.name ) {
  48
+        case 'iterator':
  49
+          if (context.type.size > 1) {
  50
+            $(property).parent().append($(property).clone().html(context.directive[property]));
  51
+          } else {
  52
+            $(property).html(context.directive[property]);
  53
+          }
  54
+          break;
  55
+        default:
  56
+          $(property).html(context.directive[property]);
  57
+          break;
  58
+      }
  59
+    };
  60
+
  61
+    var concatenate = function(context, property) {
  62
+      switch ( typeof(context.directive[property]) ) {
  63
+        case 'string':
  64
+          render(context, property);
  65
+          break;
  66
+        case 'object':
  67
+          var subContext = clone(context);
  68
+          subContext.directive = context.directive[property];
  69
+          compile(subContext);
  70
+          break;
  71
+        case 'function':
  72
+          concatenateFunc(context, property);
  73
+          break;
  74
+        default:
  75
+          console.log('error1');
  76
+          break;
  77
+      }
  78
+    };
  79
+    var concatenateFunc = function(context, property) {
  80
+      if (context.data[property]) {
  81
+        concatenateData(context, property);
  82
+      } else {
  83
+        var subContext = clone(context);
  84
+        subContext.directive = context.directive[property](context);
  85
+        compile(subContext);
  86
+      }
  87
+    };
  88
+    var concatenateData = function(context, property) {
  89
+      var dataObj = context.data[property];
  90
+      // TODO detect scalars,arrays,hashes
  91
+      context.type.name = 'iterator';
  92
+      context.type.size = 0;
  93
+      for (var idx in dataObj) {
  94
+        context.type.size++;
  95
+        var subContext = clone(context);
  96
+        subContext.directive = context.directive[property](context, idx, dataObj[idx]);
  97
+        compile(subContext);
  98
+      }
  99
+    };
  100
+
  101
+    var compile = function(context) {
  102
+      var concatenator = '';
  103
+      for (var property in context.directive) {
  104
+        concatenate(context, property);
  105
+      }
  106
+      return concatenator;
  107
+    }
  108
+
  109
+    $('.lo').click(function(){
  110
+      console.log('start');
  111
+      compile({data: data, directive: directive, type: {name:'', size:0}});
  112
+      console.log('end');
  113
+    });
48 114
   </script>
49 115
 </body>
50  
-</html>
  116
+</html>

0 notes on commit 5225a36

Please sign in to comment.
Something went wrong with that request. Please try again.