{"id":21095476,"url":"https://github.com/faebeee/twoway","last_synced_at":"2025-07-14T21:43:05.508Z","repository":{"id":57383022,"uuid":"121844186","full_name":"faebeee/twoway","owner":"faebeee","description":"Tiny zero-dependency two way databinding library","archived":false,"fork":false,"pushed_at":"2018-02-26T07:42:53.000Z","size":988,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-21T01:44:16.602Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://faebeee.github.io/twoway/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/faebeee.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-02-17T09:56:22.000Z","updated_at":"2018-03-16T19:43:38.000Z","dependencies_parsed_at":"2022-09-11T04:51:53.529Z","dependency_job_id":null,"html_url":"https://github.com/faebeee/twoway","commit_stats":null,"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/faebeee%2Ftwoway","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/faebeee%2Ftwoway/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/faebeee%2Ftwoway/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/faebeee%2Ftwoway/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/faebeee","download_url":"https://codeload.github.com/faebeee/twoway/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243538135,"owners_count":20307104,"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":[],"created_at":"2024-11-19T22:26:26.777Z","updated_at":"2025-03-14T07:13:04.463Z","avatar_url":"https://github.com/faebeee.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# twoway\n`twoway` is a very lightweight zerodependency two way databinding library. Specially designed for people wo don't want to have a framework like react, vue or angular.\n\n\n# Setup\n## CDN\nTo add `twoway` to your website you simply include the library via CDN\n\n    https://cdn.jsdelivr.net/npm/twoway\n\nand when the page is ready run \n\n    let store = twoway(\"#app\", {\n            number: null,\n            color: null,\n            size: null,\n            name: \"Fabs\",\n        }\n    );\n\n## NPM\n\nInstall it via NPM\n\n    npm i twoway --save\n\nand include and initialize it in you main file\n\n    const twoway = require('twoway');\n    let store = twoway(\"#app\", {\n            number: null,\n            color: null,\n            size: null,\n            name: \"Fabs\",\n        }\n    );\n\n# Playground\n- [Simple Input](https://jsfiddle.net/faebeeee/qttdboyq/)\n\n# Usage\n\n## Create a new store\nAfter loading the library in your project it is very simple to setup.\nFirst we create a new `TwoWay` object. The constructor required a root\nDOM node for your app and an initial state/store.\n\n    let store = twoway(\"#app\", {\n        name: \"Fabs\",\n    })\n\n## Manipulate store\nAfter creating the store you can easily manupulate the values by\ncalling `store.name = 'Foo';` and the DOM updates automatically\n\n    let store = twoway(\"#app\", {\n        name: \"Fabs\",\n    })\n\n    store.name = \"Foo Bar\";\n\n## Elements\n### Select\n\n    \u003cdiv data-property=\"size\"\u003e\u003c/div\u003e\n    \u003cselect data-model=\"size\"\u003e\n        \u003coption value='xs'\u003eXS\u003c/option\u003e\n        \u003coption value='s'\u003eS\u003c/option\u003e\n        \u003coption value='m'\u003eM\u003c/option\u003e\n        \u003coption value='l'\u003eL\u003c/option\u003e\n    \u003c/select\u003e\n\n### Radiobox\nComming soon\n\n### Checkbox\n\n    \u003cdiv data-property=\"color\"\u003e\u003c/div\u003e\n    \u003clabel\u003e\n        \u003cinput name=\"color\" type=\"radio\" value=\"red\" data-model=\"color\"\u003e red\n    \u003c/label\u003e\n    \u003clabel\u003e\n        \u003cinput name=\"color\" type=\"radio\" value=\"blue\" data-model=\"color\"\u003e blue\n    \u003c/label\u003e\n\n\n### Textarea\n    \n    \u003cdiv\u003e\n        \u003ch2\u003eTextarea\u003c/h2\u003e        \n        \u003cdiv data-property=\"message\"\u003e\u003c/div\u003e\n        \u003ctextarea data-model=\"message\"\u003e\n        \u003c/textarea\u003e\n    \u003c/div\u003e\n\n\n### Input\n\n    \u003cdiv id=app\u003e\n        \u003cdiv data-property=\"number\"\u003e\u003c/div\u003e\n        \u003cinput data-model=\"number\" type=\"number\"\u003e\n    \u003c/div\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffaebeee%2Ftwoway","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffaebeee%2Ftwoway","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffaebeee%2Ftwoway/lists"}