completed support foreach in compiled templates

src/index.html

@@ -158,25 +158,33 @@
         <tr>
             <td></td>
             <td class="label">{m.operand1.input}</td>
-            <td class="bin">{m.operand1Binary}</td>
+            <td class="bin">{m.operand1.bin.padLeft(m.bitsSize, '0')}</td>
             <td class="other">{m.operand1.other}</td>
         </tr>
         <tr>
             <td>{m.sign}</td>
             <td class="label">{m.operand2.input}</td>
-            <td class="bin">{m.operand2Binary}</td>
+            <td class="bin">{m.operand2.bin.padLeft(m.bitsSize, '0')}</td>
             <td class="other">{m.operand2.other}</td>
         </tr>
         <tr class="result">
             <td>=</td>
             <td class="label">{m.result.input}</td>
-            <td class="bin">{m.resultBinary}</td>
+            <td class="bin">{m.result.bin.padLeft(m.bitsSize, '0')}</td>
             <td class="other">{m.result.other}</td>
         </tr>
     </table>
 </script>
 <script data-template="numbersList" data-compiled="" type="text/template">
-    <table></table>
+    <table class="expression">
+        {foreach op in m.operands}
+        <tr>
+            <td class="label">{op.input}@{m.bitsSize}</td>
+            <td class="bin">{op.bin.padLeft(m.bitsSize, '0')}</td>
+            <td class="other">{op.other}</td>
+        </tr>
+        {/}
+    </table>
 </script>
 
 

src/js/app/modelViews.js

@@ -1,14 +1,20 @@
 // Expression View
+
 app.compose(function () {
     "use strict";
 
+
     var formatter = app.get('formatter');
     var calc = app.get('calc');
     var html = app.get('html');
     var cmdConfig = app.get('cmdConfig');
     var expression = app.get('expression');
 
-    app.modelView(app.models.BitwiseOperation, function() {
+    // TODO: move to protojs
+    String.prototype.padLeft = function(size, char) { return formatter.padLeft(this, size, char); }
+
+
+        app.modelView(app.models.BitwiseOperation, function() {
         function getTemplateId(model) {
             switch (model.sign) {
                 case '<<':
@@ -24,53 +30,26 @@ app.compose(function () {
 
         return {
             renderView: function(expr) {
-
+                // TODO: move all this to expression
                 var result = expression.createOperand(calc.calcExpression(expr), getResultMode([expr.operand1, expr.operand2]));
                 var maxLen = getBinaryLength([expr.operand1.value, expr.operand2 != null ? expr.operand2.value : 0, result.value]);
 
                 var model = Object.create(expr);
+                model.bitsSize = maxLen;
                 model.result = result;
-                model.operand1Binary = formatter.padLeft(expr.operand1.bin, maxLen);
-                if(expr.operand2) {
-                    model.operand2Binary = formatter.padLeft(expr.operand2.bin, maxLen);
-                }
-                model.resultBinary = formatter.padLeft(model.result.bin, maxLen);
 
                 var templateId = getTemplateId(model);
                 var template = app.template(templateId);
 
-                var el = template.render(model);
-                colorizeBits(el);
-                return el;
+                return colorizeBits(template.render(model));
             }
         }
     });
 
     app.modelView(app.models.BitwiseNumbers, {
         renderView: function(model) {
-            var maxLen = getBinaryLength(model.numbers);
-            var table = html.element('<table class="expression"></table>');
-
-            model.operands.forEach(function(n){
-
-                var row = table.insertRow();
-                var decCell = row.insertCell();
-
-                decCell.classList.add('label');
-
-                var binCell = row.insertCell();
-                binCell.className = 'bin';
-
-                decCell.textContent = n.input;
-                binCell.textContent = formatter.padLeft(n.bin, maxLen);
-
-                var otherCell = row.insertCell();
-                otherCell.className = 'other';
-                otherCell.textContent = n.other;
-            });
-
-            colorizeBits(table);
-            return table;
+            model.bitsSize = getBinaryLength(model.numbers);
+            return colorizeBits(app.template('numbersList').render(model));
         }
     });
 
@@ -119,6 +98,7 @@ app.compose(function () {
                 .replace(/0/g, '<span class="zero">0</span>')
                 .replace(/1/g, '<span class="one">1</span>');
         });
+        return container;
     }
 
     function getResultMode(operands) {

src/js/core/htmlBuilder.js

@@ -12,17 +12,16 @@
 
     html.template = function(template, model) {
         should.beString(template, "template");
-        var regex = /(?:{([^}]+)})/g, html;
-
+        var regex = /(?:{([^}]+)})/g, htmlText;
         if(model == null){
-            html = template;
+            htmlText = template;
         } else {
-            html =  template.replace(regex, function(m, g1) {
+            htmlText =  template.replace(regex, function(m, g1) {
                 return html.escapeHtml(model[g1]);
             });
         }
 
-        return html;
+        return htmlText;
     };
 
     html.compileTemplate = function (template) {
@@ -33,7 +32,6 @@
         sb.push('(function() {')
         sb.push('return function (m) { ')
         sb.push('\tvar html = [];')
-        sb.push('console.log(m)');
         var m, index = 0;
         while ((m = regex.exec(template)) !== null) {
             if(m.index > index) {
@@ -77,7 +75,7 @@
 
     function replaceToken(token, indent) {
         if(token.indexOf('foreach') == 0) {
-            var r = /([\w\.])\sin\s([\w\.]+)/g;
+            var r = /([\w\.]+)\sin\s([\w\.]+)/g;
             var m = r.exec(token);
             var v = m[1];
             var col = m[2];
@@ -89,7 +87,7 @@
             return "}";
         }
 
-        return '\t\thtml.push(' + token + ');console.log(html);'
+        return '\t\thtml.push(' + token + ');'
     }
 
     core.html = html;