diff --git a/playground/data-monster-bind/index.html b/playground/data-monster-bind/index.html new file mode 100644 index 0000000000000000000000000000000000000000..ce219f7000327310a1148c34d22f31ecde1ef702 --- /dev/null +++ b/playground/data-monster-bind/index.html @@ -0,0 +1,43 @@ +<!doctype html> +<html lang="en"> + +<head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <title>Monster-Bind</title> + <script src="main.mjs" type="module"></script> +</head> + +<body> + <main> + + <p> + Ein Updater bekommt das Element mit der ID "updater-element" <br> + und ersetzt den Inhalt des Elements mit dem Wert von path:a.b<br> + </p> + <div id="updater-element" style="padding: 5px;border: 1px solid #ff0000;" > + <p> + Das Input bekommt ein bind auf das Dataset mit <b>data-monster-bind="path:a.b"</b> + bei Änderungen wird der Wert innerhalb des Datasets geändert<br> + </p> + <form id="form1"> + <!-- data-monster-bind added --> + <input type="input" data-monster-bind="path:a.b"> + </form> + + + <p> + mit data-monster-replace="path:a.b" werden die Daten die im Updater<br> + gesetzt wurden ersetzt<br> + und immer wenn sich die Daten in dem Dataset verändern werden auch hier die Werte geändert<br> + </p> + <div style="padding: 5px;border: 1px solid #000;" data-monster-replace="path:a.b">original Wert im HTML</div> + + </div> + + + + </main> +</body> + +</html> \ No newline at end of file diff --git a/playground/data-monster-bind/main.mjs b/playground/data-monster-bind/main.mjs new file mode 100644 index 0000000000000000000000000000000000000000..ddaabd3a5698af7b80d942348cbb14aa04138527 --- /dev/null +++ b/playground/data-monster-bind/main.mjs @@ -0,0 +1,32 @@ +import {Updater} from '../../source/dom/updater.mjs'; + +/** + * Element in dem die Daten ersetzt werden sollen + */ +let updaterEelement = document.getElementById("updater-element"); + +/** + * neues Updater Objekt erstellen + * mit einem Dataset + */ +let updater = new Updater( + updaterEelement, + { + a: { + b: "Daten aus dem Updater Dataset" + } + } +); + +/** + * Events anschalten damit änderungen am Elementen mit data-monster-bind verarbeitet werden + */ +updater.enableEventProcessing(); + +/** + * nur wenn run() ausgeführt wird, werden die Daten mit data-monster-replace ersetzt + */ +updater.run(); + + +