import bindProp, {CheckedWatcherElement, PropUpdaterElement} from "jwidget/bindProp";
(el: CheckedWatcherElement, prop: "checked"): DestroyableBindable<boolean>
(el: PropUpdaterElement, prop: string, property: Bindable<boolean>, binding?: UPDATE): Destroyable
(el: CheckedWatcherElement, prop: "checked", property: IProperty<boolean>, binding: WATCH): Destroyable
(el: PropUpdaterElement & CheckedWatcherElement, prop: "checked", property: IProperty<boolean>, binding: TWOWAY): Destroyable
Binds a JQuery property of a DOM element to a boolean Property and/or back.
The first signature returns a new boolean Property bound to checkbox state of a DOM element. Only "checked" JQuery property is supported in this case.
// Watch checkbox state const property = bindProp(el, "checked");
The second signature binds a JQuery property of a DOM element to a boolean Property.
// Bind element state to property bindProp(el, "disabled", property);
The third signature binds a boolean Property to a JQuery property of a DOM element. Only "checked" JQuery property is supported in this case.
bindProp(el, "checked", property, WATCH);
The fourth signature sets up a two-way binding. Initially, the boolean property value prevails. Only "checked" JQuery property is supported in this case.
bindProp(el, "checked", property, TWOWAY);
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(bindProp(el, "disabled", property));
Subset of JQuery element methods necessary for some of bindProp binding variation implementations.