bind-dom &tw_p=tweetbutton&url=https%3A%2F%2Fgithub.com%2Fshystruk%2Fbind-dom&via=shystrukk) #

 

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

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

Examples ##

`javascript
import bindDom from 'bind-dom'

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

`javascript
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
`javascript
// JS
function changeValueAttr(event) {
event.target.setAttribute('value', event.target.value)
}

// HTML

`

#### Textarea
`javascript
// JS
function changeAttr(event) {
event.target.setAttribute('data-bind-dom', event.target.value.length)
}

// HTML

`

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

$3

{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
`javascript
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