diff --git a/example/Todo/TodoDemo.html b/example/Todo/TodoDemo.html index 7f4d139..3534020 100644 --- a/example/Todo/TodoDemo.html +++ b/example/Todo/TodoDemo.html @@ -158,19 +158,29 @@

Data-Binding

</login-screen> +

Text-to-Data-Binding

+

Inject property values into your text with a simple annotation. Have no fear from performance issues: you choose where and when your bindings happen!

+

+        <my-element user="{UserModel}"}>
+            <span bind>
+                Hello, [[user.name]]! Welcome to [[location]]
+            </span>
+        </my-element>
+    
+    

Dependency Injection

Dependency injection using curly braces


         const instance = new TodoModel()
 
-        SlimInjector.define('loginModel', function() {
+        SlimInjector.define('LoginModel', function() {
             "use strict";
             return instance
         })
 
         ...
 
-        <login-details model="{loginModel}" />
+        <login-details model="{LoginModel}" />
     
     
diff --git a/example/Todo/todo-task-item.js b/example/Todo/todo-task-item.js index d76f4b4..6866507 100644 --- a/example/Todo/todo-task-item.js +++ b/example/Todo/todo-task-item.js @@ -10,9 +10,9 @@ get template() { return `
-$NUM +[[data.todoId]] -$NAME +[[data.name]]
` } @@ -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 index 76c07f8..6da4b5d 100644 --- 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}))