https://github.com/shystruk/bind-dom
Synchronization between two DOM elements (One-Time, One-Way & Two-Way binding)
https://github.com/shystruk/bind-dom
change-detection data-binding dom-binding dom-changes javascript mutationobserver no-dependencies observer twoway
Last synced: 6 months ago
JSON representation
Synchronization between two DOM elements (One-Time, One-Way & Two-Way binding)
- Host: GitHub
- URL: https://github.com/shystruk/bind-dom
- Owner: shystruk
- License: mit
- Created: 2018-08-22T20:33:54.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2021-05-14T19:50:06.000Z (over 4 years ago)
- Last Synced: 2025-04-13T23:54:07.774Z (6 months ago)
- Topics: change-detection, data-binding, dom-binding, dom-changes, javascript, mutationobserver, no-dependencies, observer, twoway
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/bind-dom
- Size: 276 KB
- Stars: 24
- Watchers: 4
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# bind-dom [](https://twitter.com/intent/tweet?hashtags=javascript&original_referer=https%3A%2F%2Fpublish.twitter.com%2F%3FbuttonHashtag%3Djavascript%26buttonText%3DSynchronization%2520between%2520two%2520DOM%2520elements%2520%2528oneTime%252C%2520oneWay%252C%2520twoWay%2529%26buttonType%3DTweetButton%26buttonUrl%3Dhttps%253A%252F%252Fgithub.com%252Fshystruk%252Fbind-dom%26buttonVia%3Dshystrukk%26widget%3DButton&ref_src=twsrc%5Etfw&text=Synchronization%20between%20two%20DOM%20elements%20(oneTime%2C%20oneWay%2C%20twoWay)&tw_p=tweetbutton&url=https%3A%2F%2Fgithub.com%2Fshystruk%2Fbind-dom&via=shystrukk) #
[](https://opensource.org/licenses/mit-license.php) [](https://badge.fury.io/js/bind-dom)
Change detection mechanisms based on [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/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
### 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](https://dom.spec.whatwg.org/#mutationobserver)
```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](CONTRIBUTING.md) before adding your own helper or improvement to code snippets, explanations, etc.
## License
MIT © [Vasyl Stokolosa](https://about.me/shystruk)