jwidget/bindDisplay

Consumption

import bindDisplay, {DisplayUpdaterElement} from "jwidget/bindDisplay";

Default export#

(el: DisplayUpdaterElement, property: Bindable<boolean>): Destroyable

el
DOM element.
property
Element visibility.
returns
Binding object. You must destroy it to stop the synchronization.

Binds visibility of a DOM element to a boolean Property. When property value is false, sets "display" inline style to "none". When property value is true, removes "display" inline style. You must make sure that the element is visible by default according to your CSS rules.

// Bind element visibility to property value
bindDisplay(el, checked);

The function returns a binding object. If you need to stop the synchronization, destroy it. This is not necessary if you work with a private property and a private DOM element as in the example above. However, if you work with an external model or an external DOM element (e.g. they get passed to the constructor of the component), you must take care of the binding destruction, because life time of these objects can be longer than the life time of your component. The easiest way to do it is to own the binding:

this.own(bindDisplay(el, checked));

DisplayUpdaterElement#

Subset of JQuery element methods necessary for bindDisplay binding implementation.

css#

(style: "display", value: "" | "none")

See JQuery.css.