{"id":21420590,"url":"https://github.com/maxhoffmann/bindings","last_synced_at":"2025-03-16T20:11:36.234Z","repository":{"id":11869704,"uuid":"14429764","full_name":"maxhoffmann/bindings","owner":"maxhoffmann","description":"a minimal binding library for the DOM. runs with component.io and standalone.","archived":false,"fork":false,"pushed_at":"2014-07-04T22:53:01.000Z","size":312,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-23T06:32:00.571Z","etag":null,"topics":[],"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/maxhoffmann.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":"2013-11-15T16:47:23.000Z","updated_at":"2014-07-04T22:53:02.000Z","dependencies_parsed_at":"2022-08-26T03:32:12.817Z","dependency_job_id":null,"html_url":"https://github.com/maxhoffmann/bindings","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/maxhoffmann%2Fbindings","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxhoffmann%2Fbindings/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxhoffmann%2Fbindings/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maxhoffmann%2Fbindings/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/maxhoffmann","download_url":"https://codeload.github.com/maxhoffmann/bindings/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243926072,"owners_count":20369910,"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-22T20:19:21.614Z","updated_at":"2025-03-16T20:11:36.208Z","avatar_url":"https://github.com/maxhoffmann.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# bindings\na minimal binding library for the DOM. runs with component.io and standalone.\n\nbindings.js uses ES5 getters and setters to get or update DOM elements. Keep in mind that\nyou should treat this library as another way to access the DOM. Don’t do things like\nread, write, read, write… or performance might hurt. For best performance, cache the returned\nobject of bindings() and only get a new one, when you’ve expected DOM changes. Additionally\nspecify a root element whenever possible. Before you optimize anything: \"Use tools, not rules\".\nThe DOM may not be your bottleneck as it is pretty fast in modern browsers.\n\n## Installation\n\nInstall with [component(1)](http://component.io):\n\n```bash\n$ component install maxhoffmann/bindings\n```\n\n…or simply download the repository. Use `bindings.standalone.js` if you don’t use component.io.\n\n## API\n\nIf you use component.io make sure to require the library:\n\n```javascript\nvar bindings = require('bindings');\n```\n\nInclude `data-bind` attributes in your HTML:\n\n```html\n\u003cul\u003e\n\t\u003cli data-bind=\"person.name\"\u003eMax\u003c/li\u003e\n\t\u003cli data-bind=\"person.age\"\u003e24\u003c/li\u003e\n\u003c/ul\u003e\n\u003cul\u003e\n\t\u003cli data-bind=\"animal.type\"\u003edog\u003c/li\u003e\n\t\u003cli data-bind=\"animal.color\"\u003ewhite\u003c/li\u003e\n\u003c/ul\u003e\n```\n\nGet data from the DOM:\n\n```javascript\nvar dom = bindings();\nvar name = dom.person.name;\t// Max\nvar color = dom.animal.color; // white\n```\n\nUpdate data in the DOM:\n\n```javascript\nvar dom = bindings();\ndom.person.name = 'Joe';\ndom.animal.type = 'cat';\ndom.animal.color = '\u003cspan\u003eblack\u003c/span\u003e'; // you can use HTMLt\n```\n\nAnd the DOM changes automatically:\n\n```html\n\u003cul\u003e\n\t\u003cli data-bind=\"person.name\"\u003eJoe\u003c/li\u003e\n\t\u003cli data-bind=\"person.age\"\u003e24\u003c/li\u003e\n\u003c/ul\u003e\n\u003cul\u003e\n\t\u003cli data-bind=\"animal.type\"\u003ecat\u003c/li\u003e\n\t\u003cli data-bind=\"animal.color\"\u003e\u003cspan\u003eblack\u003c/span\u003e\u003c/li\u003e\n\u003c/ul\u003e\n```\n\nYou may use a different syntax:\n\n```javascript\nbindings().person.name // Max\nbindings('person').name // Max\n```\n\nYou may specify a root element:\n\n```javascript\nbindings('person', rootElement).name\n```\n\nConvert data to JSON:\n\n```javascript\nvar json = JSON.stringify( bindings('animal') );\nvar json = JSON.stringify( bindings().animal ); // same result\n\nconsole.log(json); // \"{\"type\":\"cat\",\"color\":\"\u003cspan\u003eblack\u003c/span\u003e\"}\"\n```\n\n## Customization\n\nMake a new dev build:\n\n```bash\n$ make dev\n```\n\nRun tests by opening `test/index.html` or run:\n\n```bash\n$ make test\n```\n\nIf all of your tests pass, make a new production build (includes standalone build):\n\n```bash\n$ make\n```\n\n## License\n\nThe MIT License (MIT)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaxhoffmann%2Fbindings","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmaxhoffmann%2Fbindings","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaxhoffmann%2Fbindings/lists"}