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.

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.23.0/dist/modules/dom/updater.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.23.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.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

Type:
  • HTMLElement

# subject :object

Type:
  • object

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