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@1.8.0/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@1.8.0/dist/modules/dom/updater.js';
console.log(new Updater())
</script>

Constructor

# new Updater(element, subject)

Parameters:
Name Type Description
element HTMLElement
subject object | ProxyObserver
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
// 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.
new Updater(body, obj).run();

// Now you can change the data structure and the HTML will follow these changes.
obj['headline'] = "Hello World!" 

Members

# element :HTMLElement

Type:
  • HTMLElement

# subject :object

Type:
  • object

Methods

# getSubject() → {ProxyObserver}

Since:
  • 1.8.0
Returns:
Type
ProxyObserver

# run() → {Promise}

Returns:
Type
Promise

# setCallback(name, callback) → {Transformer}

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