Implemented templates feature

app/views.js

@@ -14,9 +14,9 @@ app.compose(function () {
             expr.resultBinary = formatter.toBinaryString(expr.result, maxLen);
 
             var templateId = /<<|>>/.test(expr.sign) ? 'shiftExpressionView' : 'binaryExpressionView';
-            var htmlTpl = document.getElementById(templateId).innerHTML;
+            var template = app.template(templateId)
-            var el = html.element(htmlTpl, expr);
 
+            var el = template.render(expr);
             colorizeBits(el);
             return el;
         }
@@ -54,8 +54,8 @@ app.compose(function () {
 
     app.modelView(app.models.HelpResult, {
         renderView: function(model) {
-            var template = document.getElementById('helpView').innerHTML;
+            var template = app.template('helpResultTpl');
-            return html.element(template);
+            return template.render();
         }
     });
 
@@ -67,7 +67,7 @@ app.compose(function () {
 
     app.modelView(app.models.DisplayResult, {
         renderView: function(model) {
-            var resultView = html.element(document.getElementById('resultView').innerHTML, model);
+            var resultView = app.template('resultView').render(model);
             var contentView = app.buildViewFor(model.content);
 
             resultView.querySelector('.content').appendChild(contentView);

components/controllersFeature.js

@@ -19,6 +19,10 @@
         controllerDi.register(name, reg);
     };
 
+    app.run(function(){
+        attachControllers(app.rootViewElement, app.di);
+    });
+
     function addControllerMixin(ctrl) {
         ctrl.attachView = function(viewElement) {
 
@@ -39,10 +43,6 @@
         };
     }
 
-    app.run(function(){
-        attachControllers(app.rootViewElement, app.di);
-    });
-
     function attachControllers(rootViewElement) {
         var elements = rootViewElement.querySelectorAll('[data-controller]'),
             i = 0, l = elements.length,
@@ -78,9 +78,4 @@
         }
     }
 
-    function isController(obj) {
-        return obj.componentType == 'controller';
-
-    }
-
 })(window.app, window.should, window.Container);

components/templatesFeature.js

@@ -0,0 +1,41 @@
+(function(app) {
+
+    function Template(html) {
+        this.html = html;
+    }
+
+    Template.prototype.render = function (model) {
+        return app.get('html').element(this.html, model);
+    };
+
+    app.templates = [];
+    app.template = function (key) {
+        var tpl = this.templates[key];
+        if(tpl == null) {
+            throw  new Error(key + ' template is not found');
+        }
+        return tpl;
+    }
+
+    app.run(function() {
+        readTemplates(app.rootViewElement);
+    })
+
+    function readTemplates(containerEl) {
+        var els = containerEl.querySelectorAll('[data-template]');
+        var store = app.templates;
+
+        Array.prototype.forEach.call(els, function(element) {
+            var key = element.getAttribute('data-template');
+
+            if(store[key] instanceof Template) {
+                console.warn(key + ' templates already registered');
+                return;
+            }
+
+            store[key] = new Template(element.innerHTML);
+        });
+    }
+
+
+})(window.app);

index.html

@@ -11,8 +11,11 @@
     <script type="text/javascript" src="components/di.js"></script>
 
     <script type="text/javascript" src="app/app.js"></script>
+
     <script type="text/javascript" src="components/controllersFeature.js"></script>
     <script type="text/javascript" src="components/viewsFeature.js"></script>
+    <script type="text/javascript" src="components/templatesFeature.js"></script>
+
     <script type="text/javascript" src="app/bitwise/calc.js"></script>
     <script type="text/javascript" src="app/bitwise/expression.js"></script>
     <script type="text/javascript" src="app/bitwise/formatter.js"></script>
@@ -44,7 +47,7 @@
 <div id="output" data-controller="resultViewCtrl">
 </div>
 
-<script id="helpView" type="text/template">
+<script data-template="helpResultTpl" type="text/template">
     <div class="help">
         <p class="section">
             <strong>Supported Commands</strong>
@@ -74,14 +77,14 @@
     </div>
 </script>
 
-<script id="resultView" type="text/template">
+<script data-template="resultView" type="text/template">
     <div class="result">
         <div class="input"><span class="cur">&gt;</span>{input}</div>
         <div class="content"></div>
     </div>
 </script>
 
-<script id="shiftExpressionView" type="text/template">
+<script data-template="shiftExpressionView" type="text/template">
     <table class="expression">
         <tr>
             <td class="label">{operand1}</td>
@@ -94,7 +97,7 @@
     </table>
 </script>
 
-<script id="binaryExpressionView" type="text/template">
+<script data-template="binaryExpressionView" type="text/template">
     <table class="expression">
         <tr>
             <td></td>