Navigation Back to home

Updater

The updater class connects an object with the dom

Import
the javascript logo
import { Updater } from "@schukai/monster/source/dom/updater.mjs";
Source
the git logo
Package
the npm logo
Since
1.8.0

Introduction

The Updater connects a JavaScript object with the DOM and keeps both sides in sync using declarative attributes. When the object changes, the DOM is updated automatically; with event processing enabled, user input is written back into the object.

Quick Start







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

const data = { headline: "Hello World" };
const updater = new Updater(document.body, data);

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

Core Attributes

AttributePurpose
data-monster-replaceReplaces element content with the pipe result (for example path:title).
data-monster-attributesSets element attributes from pipe results (for example value path:price).
data-monster-bindBinds input values to a path (used by event processing and retrieve()).
data-monster-bind-typeCasts bound values (for example number, boolean, string[], json).
data-monster-insertClones a template for each item in an iterable (format: key path:items).
data-monster-removeMarks nodes that should be removed before re-inserting list items.
data-monster-select-thisForces attribute updates even if the direct value did not change (use sparingly).

Binding and Input Sync

Use data-monster-bind for inputs and call enableEventProcessing() to write user input back to the subject. If you only need a one-time read, call retrieve().

Template Insertion

The insert feature clones a document template for each entry in a list and rewrites the internal paths so that nested bindings point to the correct item.

Simple Example

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

const container = document.getElementById("updater-demo");

const data = {
    headline: "Hello World"
};

const updater = new Updater(container, data);
updater.run().then(() => updater.enableEventProcessing());

const subject = updater.getSubject();
setTimeout(() => {
    subject.headline = "Hello World!";
}, 1000);

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.