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.

you can call the method via the monster namespace new Monster.DOM.Updater().

<script type="module">
import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@/dist/modules/dom/updater.js';
console.log(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@/dist/modules/dom/updater.js';
console.log(new Updater())
</script>

Constructor

# new Updater(element, subject)

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@/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}

Since:
  • 1.9.0
Returns:
Type
Updater

# enableEventProcessing() → {Updater}

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.

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