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 class='red'></td>
      <td class='green'></td>
    </tr>
  </table>
  <a class='lo'>lala</a>
  <script>

    var data = {
      animals:[
        {name:'bird'},
        {name:'cat'},
        {name:'dog'},
        {name:'mouse'}
      ]
    };

    var directive = {
      'table': {
        animals: function(context, idx, animal){ return {
          'tr': {
            '.red': animal.name
          }
        }}
      }
    };

    var clone = function(obj) {
      return eval(uneval(obj));
    };

    var render = function(context, property) {
      // TODO support @attr and others..  
      switch ( context.type.name ) {
        case 'iterator':
          if (context.type.size > 1) {
            $(property).parent().append($(property).clone().html(context.directive[property]));
          } else {
            $(property).html(context.directive[property]);
          }
          break;
        default:
          $(property).html(context.directive[property]);
          break;
      }
    };

    var concatenate = function(context, property) {
      switch ( typeof(context.directive[property]) ) {
        case 'string':
          render(context, property);
          break;
        case 'object':
          var subContext = clone(context);
          subContext.directive = context.directive[property];
          compile(subContext);
          break;
        case 'function':
          concatenateFunc(context, property);
          break;
        default:
          console.log('error1');
          break;
      }
    };
    var concatenateFunc = function(context, property) {
      if (context.data[property]) {
        concatenateData(context, property);
      } else {
        var subContext = clone(context);
        subContext.directive = context.directive[property](context);
        compile(subContext);
      }
    };
    var concatenateData = function(context, property) {
      var dataObj = context.data[property];
      // TODO detect scalars,arrays,hashes
      context.type.name = 'iterator';
      context.type.size = 0;
      for (var idx in dataObj) {
        context.type.size++;
        var subContext = clone(context);
        subContext.directive = context.directive[property](context, idx, dataObj[idx]);
        compile(subContext);
      }
    };

    var compile = function(context) {
      var concatenator = '';
      for (var property in context.directive) {
        concatenate(context, property);
      }
      return concatenator;
    }

    $('.lo').click(function(){
      console.log('start');
      compile({data: data, directive: directive, type: {name:'', size:0}});
      console.log('end');
    });
  </script>
</body>
</html>