Skip to content
Snippets Groups Projects
Commit 56631c53 authored by Martin Massenberg's avatar Martin Massenberg
Browse files

Merge branch '20240222' into 'master'

20240222

See merge request oss/libraries/javascript/monster!46
parents 9f8d4426 9b18fd8b
No related branches found
No related tags found
No related merge requests found
<!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
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();
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment