bind-dom

Synchronization between two DOM elements (oneTime, oneWay, twoWay)

Usage no npm install needed!

<script type="module">
  import bindDom from 'https://cdn.skypack.dev/bind-dom';
</script>

README

bind-dom Twitter URL

MIT Licence npm version

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