jwidget/DomInserter

Consumption

import DomInserter from "jwidget/DomInserter";

Default export#

Hierarchy#

Description#

View synchronizer. Synchronizes DOM element children with the source BindableArray. Usually used in conjunction with startMappingArray.

const data = new BindableArray(["apple", "banana", "cherry"]);
const elements = startMappingArray(data, value => $('<option />').text(value)[0]);
const inserter = new DomInserter(elements, document.getElementById("myselect"));

You must destroy the DomInserter instance to stop the synchronization.

Prefer using Component capabilities for DOM management and avoid DomInserter usage if possible.

Constructor#

new DomInserter(source: ReadonlyBindableArray<HTMLElement>, el: HTMLElement)

source
Array of child elements.
el
Parent element to insert the child elements to.

Fields#

el#

el: HTMLElement

Parent element to insert children into.

Methods#

destroy (inherited from Class)#

(): void

Class destructor invocation method. Destroys all aggregated objects and calls destroyObject method. You must call this method explicitly from outside, because JavaScript doesn't support automatic class destructor calling.

const object = new MyClass();

// ...

// When the object is not needed anymore, destroy it.
object.destroy();

Alternatively (and optimally), you should use own method to aggregate this object inside another one.

destroyObject (inherited from Class)#

protected (): void

Class destructor implementation. Called in destroy method after destruction of all aggregated objects. The logic of class instance destruction should usually be implemented here. If you override this method, remember to call super.destroyObject() at the end of the method:

destroyObject() {
    // Release resources
    ...

    // Call superclass destructor
    super.destroyObject();
}
own (inherited from IClass)#

<T extends Destroyable>(obj: T): T

obj
Object to aggregate.
returns
obj

Aggregates the object. It means that the specified object is automatically destroyed on this object destruction. The aggregated objects are destroyed in reverse order. Returns obj object, which makes it easy to use in field definition:

private selected = this.own(new Property(false));
owning (inherited from IClass)#

(obj: Destroyable): this

obj
Object to aggregate.
returns
this

The same as own, but returns this, which makes it easy to use in object instantiation:

const items = new BindableArray().ownValues();
return new Panel(items).owning(items);