Added basic template element with support for variables

plexium · Sep 7, 2015 · 812bcac · 812bcac
1 parent ac4eee0
commit 812bcac
Show file tree

Hide file tree

Showing 3 changed files with 111 additions and 0 deletions.
diff --git a/demo/b-template.html b/demo/b-template.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>b-template</title>
+        <meta charset="utf-8">
+        <script type="text/javascript" src="lib/webcomponents.js"></script>
+        <script type="text/javascript" src="lib/bosonic-runtime.js"></script>
+
+        <link rel="import" href="lib/b-template.html">
+
+        <link rel="stylesheet" href="styles.css">
+    </head>
+
+    <body>
+        <h1>Templating</h1>
+        <h2></h2>
+        <template is="b-template" id="template1">
+            <span class="{{css}}">Hello, {{name}}! Foo? {{obj.foo}}!</span>
+        </template>
+
+        <script type="text/javascript">
+            window.addEventListener('WebComponentsReady', function() {
+                var h2 = document.querySelector('h2'),
+                    tpl1 = document.getElementById('template1');
+                console.log(tpl1.renderInto({ 
+                    name: 'Bosonic',
+                    css: 'foo',
+                    obj: {
+                        foo: 'bar'
+                    }
+                }, h2));
+            }); 
+        </script>
+    </body>
+</html>
diff --git a/demo/lib/b-template.html b/demo/lib/b-template.html
@@ -0,0 +1,38 @@
+<element name="b-template" extends="template">
+    <script>
+        (function(){
+            Bosonic.register({
+                get outerHTML() {
+                    var tmp = document.createElement('div');
+                    tmp.appendChild(document.importNode(this.content, true));
+                    return tmp.innerHTML;
+                },
+
+                compile: function(html) {
+                    var code = "var v, out='" 
+                        + html.replace(/[\r\t\n]/g, " ")
+                              .replace(/\{\{([\s\S]+?)\}\}/g, function(m, js) {
+                                  return "'+\n((v=(data." + js + "))==null?'':v)+\n'";
+                               }) + "';return out;";
+                    try {
+                        return new Function('data', code);
+                    } catch (e) {
+                        console.log("Could not create a renderer: " + code);
+                        throw e;
+                    }
+                },
+
+                render: function(data) {
+                    var html = this.outerHTML,
+                        renderer = this.compile(html);
+
+                    return renderer(data);
+                },
+
+                renderInto: function(data, elt) {
+                    elt.innerHTML = this.render(data);
+                }
+            });
+        })();
+    </script>
+</element>
diff --git a/src/b-template.html b/src/b-template.html
@@ -0,0 +1,38 @@
+<element name="b-template" extends="template">
+    <script>
+        (function(){
+            Bosonic.register({
+                get outerHTML() {
+                    var tmp = document.createElement('div');
+                    tmp.appendChild(document.importNode(this.content, true));
+                    return tmp.innerHTML;
+                },
+
+                compile: function(html) {
+                    var code = "var v, out='" 
+                        + html.replace(/[\r\t\n]/g, " ")
+                              .replace(/\{\{([\s\S]+?)\}\}/g, function(m, js) {
+                                  return "'+\n((v=(data." + js + "))==null?'':v)+\n'";
+                               }) + "';return out;";
+                    try {
+                        return new Function('data', code);
+                    } catch (e) {
+                        console.log("Could not create a renderer: " + code);
+                        throw e;
+                    }
+                },
+
+                render: function(data) {
+                    var html = this.outerHTML,
+                        renderer = this.compile(html);
+
+                    return renderer(data);
+                },
+
+                renderInto: function(data, elt) {
+                    elt.innerHTML = this.render(data);
+                }
+            });
+        })();
+    </script>
+</element>