Adding text-binding on

slimjs · Dec 1, 2016 · c885792 · c885792
1 parent 9df22a7
commit c885792
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 8 deletions.
diff --git a/example/Todo/TodoDemo.html b/example/Todo/TodoDemo.html
@@ -158,19 +158,29 @@ <h4>Data-Binding</h4>
         &lt;/login-screen>
     </code>
     </pre>
+    <h4>Text-to-Data-Binding</h4>
+    <p>Inject property values into your text with a simple annotation. Have no fear from performance issues: you choose where and when your bindings happen!</p>
+    <pre><code class="javascript">
+        &lt;my-element user="{UserModel}"}>
+            &lt;span bind>
+                Hello, [[user.name]]! Welcome to [[location]]
+            &lt;/span>
+        &lt;/my-element>
+    </code>
+    </pre>
     <h4>Dependency Injection</h4>
     <p>Dependency injection using curly braces</p>
     <pre><code class="javascript">
         const instance = new TodoModel()
 
-        SlimInjector.define('loginModel', function() {
+        SlimInjector.define('LoginModel', function() {
             "use strict";
             return instance
         })
 
         ...
 
-        &lt;login-details model="{loginModel}" />
+        &lt;login-details model="{LoginModel}" />
     </code>
     </pre>
 </s-container>

diff --git a/example/Todo/todo-task-item.js b/example/Todo/todo-task-item.js
@@ -10,9 +10,9 @@
         get template() {
             return `
 <div id="container">
-<span id="number">$NUM</span>
+<span id="number" bind>[[data.todoId]]</span>
 <input type="checkbox" done="[done]"/>
-<span id="title" text="[name]">$NAME</span>
+<span id="title" text="[name]" bind>[[data.name]]</span>
 <input type="button" value="X">
 </div>`
         }
@@ -26,9 +26,7 @@
         }
 
         update () {
-            this.innerHTML = this.innerHTML
-                .split('$NAME').join(this.data.name)
-                .split('$NUM').join(this.data.todoId)
+            super.update()
 
             var checkbox = this.find('input[type=checkbox]')
             var delButton = this.find('input[value="X"]')

diff --git a/lib/SlimElement.html b/lib/SlimElement.html
@@ -130,7 +130,9 @@
             render() {}
             afterRender() {}
             onAdded() {}
-            update() {}
+            update() {
+                this._applyTextBindings()
+            }
             onRemoved() {}
 
             //noinspection JSUnusedGlobalSymbols
@@ -161,6 +163,26 @@
                 this.afterRender()
             }
 
+            _applyTextBindings() {
+                const x = function getDescendantProp(obj, desc) {
+                    var arr = desc.split(".");
+                    while(arr.length && obj) {
+                            obj = obj[arr.shift()]
+                    };
+                    return obj;
+                }
+
+                for (let child of this.querySelectorAll('*[bind]')) {
+                    var match = child.textContent.match(/\[\[([\w|.]+)\]\]/g)
+                    child.sourceTextContent = child.textContent;
+                    if (match) {
+                        for (var i = 0; i < match.length; i++) {
+                            child.innerText = child.innerText.replace(match[i], x(this, match[i].match(/([^\[].+[^\]])/)[0]))
+                        }
+                    }
+                }
+            }
+
             //noinspection JSUnusedGlobalSymbols
             attachedCallback() {
                 this.dispatchEvent(new Event('elementAdded', {bubbles:true}))