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}))