hd-utils/lib/classes/TwoWayBinder.js

A handy utils for modern JS developers

/**
 * @description give the ability to create two-way data binding without any js library.
 * @example
 * const inputElement = document.getElementById('textInput') as HTMLInputElement;
    const outputElement = document.getElementById('textDisplay') as HTMLElement;

    const binder = new TwoWayBinder(
        inputElement,
        outputElement
    );
 */
export default class TwoWayBinder {
    constructor(inputElement, outputElement, eventType = 'input') {
        this.inputElement = inputElement;
        this.outputElement = outputElement;
        this.eventType = eventType;
        // Initialize the input and output elements
        this.updateElements();
        // Update property when the input event is triggered
        this.inputElement.addEventListener(this.eventType, this.onInputChanged.bind(this));
    }
    onInputChanged() {
        this.value = this.inputElement.value;
    }
    updateElements() {
        this.inputElement.value = this.value;
        this.outputElement.textContent = this.value;
    }
    updateInput() {
        this.inputElement.value = this.value;
    }
    updateOutput() {
        this.outputElement.textContent = this.value;
    }
    get value() {
        return this.inputElement.value;
    }
    set value(newValue) {
        this.inputElement.value = newValue;
        this.outputElement.textContent = newValue;
    }
}