Class: Updater

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 monsterjs.org

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:

Name	Type	Description
`element`	HTMLElement
`subject`	object \| ProxyObserver \| undefined

Since: 1.8.0
Copyright: schukai GmbH
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.

Since: 1.9.0

Returns:

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

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

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:

Name	Type	Description
`name`	string
`callback`	function

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'

Parameters:

Name	Type	Description
`types`	Array

Since: 1.9.0
See: https://developer.mozilla.org/de/docs/Web/Events

Returns:

Type:: Updater