Monster.DOM. Updater

The updater class connects an object with the dom. In this way, structures and contents in the DOM can be programmatically adapted via attributes.

For example, to include a string from an object, the attribute data-monster-replace can be used. a further explanation can be found under DOM-based templating implementation.

Changes to attributes are made only when the direct values are changed. If you want to assign changes to other values as well, you have to insert the attribute data-monster-select-this. This should be done with care, as it can reduce performance.

Constructor

new Updater(element, subject)

The updater class connects an object with the dom

Parameters:
NameTypeDescription
elementHTMLElement
subjectobject | ProxyObserver | undefined
Since
  • 1.8.0
License
  • AGPLv3
See
  • Monster.DOM.findDocumentTemplate
Throws:
  • 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
Example
import {Updater} from '@schukai/monster/source/dom/updater.mjs';

// 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!"

Methods

disableEventProcessing() → {Updater}

This method turns off the magic or who loves it more profane it removes the eventListener.

This method turns off the magic or who loves it more profane it removes the eventListener.

Since
  • 1.9.0
Returns:
Type: 
Updater

enableEventProcessing() → {Updater}

With this method, the eventlisteners are hooked in and the magic begins.

With this method, the eventlisteners are hooked in and the magic begins.

updater.run().then(() => {
  updater.enableEventProcessing();
});
Since
  • 1.9.0
Throws:

the bind argument must start as a value with a path

Type
Error
Returns:
Type: 
Updater

getSubject() → {Proxy}

If you have passed a ProxyObserver in the constructor, you will get the object that the ProxyObserver manages here.

If you have passed a ProxyObserver in the constructor, you will get the object that the ProxyObserver manages here. However, if you passed a simple object, here you will get a proxy for that object.

For changes the ProxyObserver must be used.

Since
  • 1.8.0
Returns:
Type: 
Proxy

retrieve() → {Monster.DOM.Updater}

Gets the values of bound elements and changes them in subject

.

Gets the values of bound elements and changes them in subject

Since
  • 1.27.0
Returns:
Type: 
Monster.DOM.Updater

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();
});
Returns:
Type: 
Promise

setCallback(name, callback) → {Transformer}

This method can be used to register commands that can be called via call: instruction.

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.

Parameters:
NameTypeDescription
namestring
callbackfunction
Throws:
  • value is not a string

    Type
    TypeError
  • value is not a function

    Type
    TypeError
Returns:
Type: 
Transformer

setEventTypes(types) → {Updater}

Defaults: 'keyup', 'click', 'change', 'drop', 'touchend'

.

Defaults: 'keyup', 'click', 'change', 'drop', 'touchend'

Parameters:
NameTypeDescription
typesArray
Since
  • 1.9.0
Returns:
Type: 
Updater