bind-dom

bind-dom

Change detection mechanisms based on MutationObserver interface. It provides the ability to watch for changes being made to the DOM tree. You may connect node elements in One-Time, One-Way & Two-Way binding.

Installation

npm

npm install bind-dom

yarn

yarn add bind-dom

Usage

import { oneTime, oneWay, twoWay, disconnect, disconnectAll } from 'bind-dom'

import bindDom from 'bind-dom'

Examples

import bindDom from 'bind-dom'

bindDom.oneWay('oneWayObserver', document.querySelector('#targetNode'), document.querySelector('#toNode'))
bindDom.disconnect('oneWayObserver')

import { twoWay, disconnect } from 'bind-dom'

twoWay('twoWayObserver', document.querySelector('#targetNode'), document.querySelector('#targetNode_2'))
disconnect('twoWayObserver')

MutationObserver is watching changes being made to the DOM tree. So, for input/textarea elements make sure that attributes are changed. See the examples below.

Input

// JS
function changeValueAttr(event) {
 event.target.setAttribute('value', event.target.value)
}
    
// HTML
<input type="text" onkeyup="changeValueAttr(event)" />

Textarea

// JS
function changeAttr(event) {
 event.target.setAttribute('data-bind-dom', event.target.value.length)
}
    
// HTML
<textarea data-bind-dom="" onkeyup="changeAttr(event)"></textarea>

API

• oneTime(observerName, targetNode, toNode, config) - binding occurs one time when element content change

• oneWay(observerName, targetNode, toNode, config) - creates an ongoing connection between targetNode and toNode

• twoWay(observerName, targetNode, toNode, config) - creates a vice versa connection between targetNode and toNode

• disconnect(observerName) - disconnects observer

• disconnectAll() - disconnects all observers

Arguments

{String} observerName - unique observer name

{Element} targetNode - node element which is going to be observe for DOM changes

{Element} toNode - node element to which changes is going to be applied (twoWay binding vice versa with targetNode)

{Object} config - specs

const config = {
    // what target objects to observe
    // { attributes: true, childList: true, characterData: true } by default
    members: {
        attributes: true,
        childList: true,
        subtree: true,
        characterData: true,
        attributeOldValue: true,
        characterDataOldValue: true
    },
    callback: (mutationsList) => { 
        // mutationsList[Array] - list of nodes which were changed 
    }
}

Contributing

Any contributions you make are greatly appreciated.

Please read the Contributions Guidelines before adding your own helper or improvement to code snippets, explanations, etc.

License

MIT © Vasyl Stokolosa