bind-dom: Synchronization between two DOM elements
source link: https://www.tuicool.com/articles/hit/vauuAzU
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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, disconnectBindDom, disconnectBindDomAll } from 'bind-dom'
import bindDom from 'bind-dom'
Examples
import bindDom from 'bind-dom' bindDom.oneWay('observeElement', document.querySelector('#observerNode'), document.querySelector('#toNode')) bindDom.disconnectBindDom('observeElement')
import { twoWay, disconnectBindDom } from 'bind-dom' twoWay('twoWayObserver', document.querySelector('#observerNode'), document.querySelector('#observerNode_2')) disconnectBindDom('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, observerNode, toNode, config)- binding occurs one time when element content change
-
oneWay(observerName, observerNode, toNode, config)- creates an ongoing connection between observerNode and toNode
-
twoWay(observerName, observerNode, toNode, config)- creates a vice versa connection between observerNode and toNode
-
disconnectBindDom(observerName)- disconnects observer
-
disconnectBindDomAll()- disconnects all observers
Arguments
{String} observerName - unique observer name
{Element} observerNode - 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 observerNode)
{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
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK