Updater

The updater class connects an object with the dom

Import

import { Updater } from "@schukai/monster/source/dom/updater.mjs";

Source

View source code

Package

@schukai/monster

Since

1.8.0

Simple Example

import {Updater} from '@schukai/monster/source/dom/updater.mjs';

// First, we prepare the HTML document.
// This is done here via a 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 script = new Updater(body, obj);
script.run();

// Now you can change the data structure and the HTML will follow these changes.
const subject = script.getSubject();
subject['headline'] = "Hello World!"

Exported

Updater, addObjectWithUpdaterToElement

Derived from

Base

Options

The Options listed in this section are defined directly within the class. This class is derived from several parent classes. Therefore, it inherits Options from these parent classes. If you cannot find a specific Options in this list, we recommend consulting the documentation of the Base.

Option

Type

Default

Description

-/-

Properties

The Properties listed in this section are defined directly within the class. This class is derived from several parent classes. Therefore, it inherits Properties from these parent classes. If you cannot find a specific Properties in this list, we recommend consulting the documentation of the Base.

Methods

The methods listed in this section are defined directly within the class. This class is derived from several parent classes. Therefore, it inherits methods from these parent classes. If you cannot find a specific method in this list, we recommend consulting the documentation of the Base.

Constructor

constructor(element,subject)1.8.0

Parameters

element {htmlelement}: element
subject {object|proxyobserver|undefined}: subject

Throws

{TypeError} value is not a object
{TypeError} value is not an instance of HTMLElement

Behavioral methods

disableEventProcessing()1.9.0

Returns

{Updater}

This method turns off the magic or who loves it more profane it removes the eventListener.

enableEventProcessing()1.9.0

Returns

{Updater}

Throws

{Error} the bind argument must start as a value with a path

With this method, the eventlisteners are hooked in and the magic begins.

updater.run().then(() => {
  updater.enableEventProcessing();
});

Structural methods

getSubject()1.8.0

Returns

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

setCallback(name,callback)

Parameters

name {string}: name
callback {function}: callback

Returns

{Transformer}

Throws

{TypeError} value is not a string
{TypeError} value is not a function

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.

setEventTypes(types)1.9.0

Parameters

types {array}: types

Returns

{Updater}

Defaults: 'keyup', 'click', 'change', 'drop', 'touchend'

Other methods

retrieve()1.27.0

Returns

{Monster.DOM.Updater}

Gets the values of bound elements and changes them in subject

run()

Returns

{Promise}

The run method must be called for the update to start working. The method ensures that changes are detected.

updater.run().then(() => {
  updater.enableEventProcessing();
});

undefined()

Returns

{Promise}

undefined(change)

Parameters

change

Events

This component does not fire any public events. It may fire events that are inherited from its parent classes.

The current width of the area is too small to display the content correctly.