{"id":26243999,"url":"https://github.com/shystruk/bind-dom","last_synced_at":"2025-04-23T14:34:34.453Z","repository":{"id":51330673,"uuid":"145759902","full_name":"shystruk/bind-dom","owner":"shystruk","description":"Synchronization between two DOM elements (One-Time, One-Way \u0026 Two-Way binding)","archived":false,"fork":false,"pushed_at":"2021-05-14T19:50:06.000Z","size":283,"stargazers_count":24,"open_issues_count":0,"forks_count":0,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-13T23:54:07.774Z","etag":null,"topics":["change-detection","data-binding","dom-binding","dom-changes","javascript","mutationobserver","no-dependencies","observer","twoway"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/bind-dom","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/shystruk.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-08-22T20:33:54.000Z","updated_at":"2023-11-22T15:17:37.000Z","dependencies_parsed_at":"2022-09-08T12:01:08.410Z","dependency_job_id":null,"html_url":"https://github.com/shystruk/bind-dom","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shystruk%2Fbind-dom","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shystruk%2Fbind-dom/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shystruk%2Fbind-dom/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shystruk%2Fbind-dom/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shystruk","download_url":"https://codeload.github.com/shystruk/bind-dom/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250452687,"owners_count":21433068,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["change-detection","data-binding","dom-binding","dom-changes","javascript","mutationobserver","no-dependencies","observer","twoway"],"created_at":"2025-03-13T10:38:40.345Z","updated_at":"2025-04-23T14:34:34.435Z","avatar_url":"https://github.com/shystruk.png","language":"JavaScript","readme":"# bind-dom [![Twitter URL](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?hashtags=javascript\u0026original_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\u0026ref_src=twsrc%5Etfw\u0026text=Synchronization%20between%20two%20DOM%20elements%20(oneTime%2C%20oneWay%2C%20twoWay)\u0026tw_p=tweetbutton\u0026url=https%3A%2F%2Fgithub.com%2Fshystruk%2Fbind-dom\u0026via=shystrukk) #\n[![MIT Licence](https://badges.frapsoft.com/os/mit/mit.svg?v=103)](https://opensource.org/licenses/mit-license.php) [![npm version](https://badge.fury.io/js/bind-dom.svg)](https://badge.fury.io/js/bind-dom)\n\nChange detection mechanisms based on [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) interface.\nIt provides the ability to watch for changes being made to the DOM tree. You may connect node elements in One-Time, One-Way \u0026 Two-Way binding.\n\n![](Demo.gif)\n\n## Installation\n#### npm\n`npm install bind-dom`\n\n#### yarn\n`yarn add bind-dom`\n\n## Usage\n```javascript\nimport { oneTime, oneWay, twoWay, disconnect, disconnectAll } from 'bind-dom'\n```\n```javascript\nimport bindDom from 'bind-dom'\n```\n\n## Examples ##\n```javascript\nimport bindDom from 'bind-dom'\n\nbindDom.oneWay('oneWayObserver', document.querySelector('#targetNode'), document.querySelector('#toNode'))\nbindDom.disconnect('oneWayObserver')\n```\n\n```javascript\nimport { twoWay, disconnect } from 'bind-dom'\n\ntwoWay('twoWayObserver', document.querySelector('#targetNode'), document.querySelector('#targetNode_2'))\ndisconnect('twoWayObserver')\n```\n\n\u003e 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. \n\n#### Input\n```javascript\n// JS\nfunction changeValueAttr(event) {\n event.target.setAttribute('value', event.target.value)\n}\n    \n// HTML\n\u003cinput type=\"text\" onkeyup=\"changeValueAttr(event)\" /\u003e\n```\n\n#### Textarea\n```javascript\n// JS\nfunction changeAttr(event) {\n event.target.setAttribute('data-bind-dom', event.target.value.length)\n}\n    \n// HTML\n\u003ctextarea data-bind-dom=\"\" onkeyup=\"changeAttr(event)\"\u003e\u003c/textarea\u003e\n```\n\n## API\n- **oneTime(observerName, targetNode, toNode, config)** - binding occurs one time when element content change\n\n- **oneWay(observerName, targetNode, toNode, config)** - creates an ongoing connection between *targetNode* and *toNode*\n \n- **twoWay(observerName, targetNode, toNode, config)** - creates a vice versa connection between *targetNode* and *toNode*\n\n- **disconnect(observerName)** - disconnects observer\n\n- **disconnectAll()** - disconnects all observers\n\n### Arguments\n{String} observerName    - unique observer name\u003cbr\u003e\n\n{Element} targetNode   - node element which is going to be observe for DOM changes\u003cbr\u003e\n\n{Element} toNode         - node element to which changes is going to be applied (twoWay binding vice versa with targetNode)\u003cbr\u003e\n\n{Object} config          - [specs](https://dom.spec.whatwg.org/#mutationobserver)\n```javascript\nconst config = {\n    // what target objects to observe\n    // { attributes: true, childList: true, characterData: true } by default\n    members: {\n        attributes: true,\n        childList: true,\n        subtree: true,\n        characterData: true,\n        attributeOldValue: true,\n        characterDataOldValue: true\n    },\n    callback: (mutationsList) =\u003e { \n        // mutationsList[Array] - list of nodes which were changed \n    }\n}\n```\n\n## Contributing\nAny contributions you make **are greatly appreciated**.\n\nPlease read the [Contributions Guidelines](CONTRIBUTING.md) before adding your own helper or improvement to code snippets, explanations, etc.\n\n## License\n\nMIT © [Vasyl Stokolosa](https://about.me/shystruk)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshystruk%2Fbind-dom","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshystruk%2Fbind-dom","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshystruk%2Fbind-dom/lists"}