Constructor
# new Updater(element, subject)
The updater class connects an object with the dom
Name | Type | Description |
---|---|---|
element |
HTMLElement | |
subject |
object | ProxyObserver | undefined |
- Since:
- 1.8.0
- Copyright:
- schukai GmbH
-
-
the value is not iterable
- Type
- Error
-
-
-
pipes are not allowed when cloning a node.
- Type
- Error
-
-
-
no template was found with the specified key.
- Type
- Error
-
-
-
the maximum depth for the recursion is reached.
- Type
- Error
-
-
-
value is not a object
- Type
- TypeError
-
-
-
value is not an instance of HTMLElement
- Type
- TypeError
-
import {Updater} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.23.0/dist/modules/dom/updater.js';
// First we prepare the html document.
// This is done here via script, but can also be inserted into the document as pure html.
// To do this, simply insert the tag <h1 data-monster-replace="path:headline"></h1>.
const body = document.querySelector('body');
const headline = document.createElement('h1');
headline.setAttribute('data-monster-replace','path:headline')
body.appendChild(headline);
// the data structure
let obj = {
headline: "Hello World",
};
// Now comes the real magic. we pass the updater the parent HTMLElement
// and the desired data structure.
const updater = new Updater(body, obj);
updater.run();
// Now you can change the data structure and the HTML will follow these changes.
const subject = updater.getSubject();
subject['headline'] = "Hello World!"
Members
# element :HTMLElement
- HTMLElement
# subject :object
- object
Methods
# disableEventProcessing() → {Updater}
This method turns off the magic or who loves it more profane it removes the eventListener.
- Since:
- 1.9.0
- Type
- Updater
# enableEventProcessing() → {Updater}
With this method, the eventlisteners are hooked in and the magic begins.
updater.run().then(() => {
updater.enableEventProcessing();
});
- Since:
- 1.9.0
- Type
- Updater
# getSubject() → {ProxyObserver}
If you have passed a ProxyObserver in the constructor, you will get the same object here. However, if you have passed a simple object, you will get the ProxyObserver here.
For changes the ProxyObserver must be used.
- Since:
- 1.8.0
- Type
- ProxyObserver
# run() → {Promise}
Let the magic begin
The run method must be called for the update to start working. The method ensures that changes are detected.
updater.run().then(() => {
updater.enableEventProcessing();
});
- Type
- Promise
# setCallback(name, callback) → {Transformer}
This method can be used to register commands that can be called via call: instruction. This can be used to provide a pipe with its own functionality.
Name | Type | Description |
---|---|---|
name |
string | |
callback |
function |
-
-
value is not a string
- Type
- TypeError
-
-
-
value is not a function
- Type
- TypeError
-
- Type
- Transformer
# setEventTypes(types) → {Updater}
Defaults: 'keyup', 'click', 'change', 'drop', 'touchend'
Name | Type | Description |
---|---|---|
types |
Array |
- Since:
- 1.9.0
- Type
- Updater