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

You can create an object of this class using the monster namespace new Monster.DOM.Updater().

<script type="module">
import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.30.0/dist/monster.js';
new Monster.DOM.Updater()
</script>

Alternatively, you can also integrate this function individually.

<script type="module">
import {Updater} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.30.0/dist/modules/dom/updater.js';
new Updater()
</script>

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
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 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.30.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!"

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. 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 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
Returns:
Type
Updater