{"id":22231506,"url":"https://github.com/aydncnar/vanilla-data-binder","last_synced_at":"2025-07-27T20:32:20.376Z","repository":{"id":57390644,"uuid":"162836515","full_name":"aydncnar/vanilla-data-binder","owner":"aydncnar","description":null,"archived":false,"fork":false,"pushed_at":"2019-07-26T13:13:00.000Z","size":17,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-08-09T23:45:06.532Z","etag":null,"topics":["data-binding","javascript","two-way-databinding","vanilla"],"latest_commit_sha":null,"homepage":"","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/aydncnar.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-12-22T19:10:32.000Z","updated_at":"2023-08-19T09:43:31.000Z","dependencies_parsed_at":"2022-09-01T16:03:22.063Z","dependency_job_id":null,"html_url":"https://github.com/aydncnar/vanilla-data-binder","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aydncnar%2Fvanilla-data-binder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aydncnar%2Fvanilla-data-binder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aydncnar%2Fvanilla-data-binder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aydncnar%2Fvanilla-data-binder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aydncnar","download_url":"https://codeload.github.com/aydncnar/vanilla-data-binder/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":227833390,"owners_count":17826547,"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":["data-binding","javascript","two-way-databinding","vanilla"],"created_at":"2024-12-03T01:26:53.449Z","updated_at":"2024-12-03T01:26:53.992Z","avatar_url":"https://github.com/aydncnar.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Welcome to Vanilla Data Binder\n\nIf variables will show on different places, this process can be so complex. You must select dom objects and change their property. And when dom object's property change, you must listen dom events and change your variables by this events.\n\nTwo way data binding is a method to make eaiser this process. You can use \"2 way data binding\" on basic level with this package.\n\n![npm bundle size](https://img.shields.io/bundlephobia/min/vanilla-data-binder)\n![npm](https://img.shields.io/npm/dy/vanilla-data-binder)\n\n![enter image description here](https://media.giphy.com/media/khdjLv6hg2q8vEbgVB/giphy.gif)\n\n### 1. Install:\n```bash\nnpm install vanilla-data-binder\n```\nor\n```bash\nyarn add vanilla-data-binder\n```\n\n### 2. Require:\n```js\nimport Binder from 'vanilla-data-binder';\n```\n\n### 3. Usage:\nJavascript\n```js\nimport Binder from 'vanilla-data-binder';\n\nlet stateList = {\n\tname: 'Aydin Cinar',\n\tage: 25\n}\n\nwindow.onload = () =\u003e {\n\tconst states = new Binder.Binder(stateList);\n}\n```\nHTML\n```html\n\u003cinput type=\"text\" data-bind-value=\"name\" /\u003e // data-bind-value use for text, textarea\n\u003cp data-bind-html=\"name\"\u003e\u003c/p\u003e // data-bind-html use for div, span, p etc.\n```\n\n### 4. To Change states from javascript:\n\n```js\nstates.setState('name', 'Aydin'); // Name will set by Aydin\nstates.setState('age', 26  +  10); // Age will set by 36\n```\n\nor \n\n```js\nconst newAge = (param)  =\u003e {\n\treturn  param  +  15;\n};\n\nconst newValues = {\n\tname: 'Aydin Cinar',\n\tage: newAge(25)\n};\n\nstates.setState(newValues); // Output =\u003e name: Aydin Cinar, age: 40\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faydncnar%2Fvanilla-data-binder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faydncnar%2Fvanilla-data-binder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faydncnar%2Fvanilla-data-binder/lists"}