{"id":21279623,"url":"https://github.com/davidmunozmartinez/bindrjs","last_synced_at":"2025-07-11T09:31:15.600Z","repository":{"id":45517717,"uuid":"513700719","full_name":"DavidMunozMartinez/bindrjs","owner":"DavidMunozMartinez","description":"My attempt at not a framework for HTML data binding","archived":false,"fork":false,"pushed_at":"2023-09-30T20:58:18.000Z","size":1943,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-11-08T09:48:38.945Z","etag":null,"topics":["data-binding","html","javascript","library"],"latest_commit_sha":null,"homepage":"https://bindrjs.vercel.app/","language":"TypeScript","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/DavidMunozMartinez.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":"2022-07-13T23:37:03.000Z","updated_at":"2023-09-06T15:55:38.000Z","dependencies_parsed_at":"2023-01-31T10:31:32.404Z","dependency_job_id":null,"html_url":"https://github.com/DavidMunozMartinez/bindrjs","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/DavidMunozMartinez%2Fbindrjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DavidMunozMartinez%2Fbindrjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DavidMunozMartinez%2Fbindrjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DavidMunozMartinez%2Fbindrjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DavidMunozMartinez","download_url":"https://codeload.github.com/DavidMunozMartinez/bindrjs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225710970,"owners_count":17512131,"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","html","javascript","library"],"created_at":"2024-11-21T10:24:38.952Z","updated_at":"2024-11-21T10:24:39.669Z","avatar_url":"https://github.com/DavidMunozMartinez.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# BindrJS\n\nThe lightest of libraries for good solid HTML data binding.\n\n## Why?\n\nIf you are like me and often want to spin up a quick project that uses just plain JavaScript.\n - No compilation process\n - No bundle bigger than my actual project\n - No complex setup or strict framework \"rules\"\n - No Virtual DOM\n\nJust... Data... Binding... This is for you\n\n## How?\n\nAll you need to know to get this library working is:\n\nColon (```:```) before any attribute or text within a (```${}```) in a text node become Bind Handlers.\n\nA Bind Handler is what Binds the Reactive Data and the HTML, expressions defined within Bind Handlers get re-evaluated\nONLY when data changes that concern that Bind Handler happen\n\nData changes have direct effect on DOM updates thanks to native JavaScript Proxy API, which gets rid of the need for expensive dirty checking or setter functions.\n\nUsing the Proxy API along-side Bind Handlers, anytime a property is updated, all and ONLY the DOM elements that are related to that data are updated accordingly.\n\nThis library requires no configuration, or setup, just include the js bundle into your page and you are ready to start binding reactive data to your HTML\n\n## Not buying it?\n\nThis library is also built thinking about how YOU might want to scale it up to your specific needs.\nChances are you DO need data reactivity, but you want it to affect your DOM in your very own specific way, with this library you can create you own HTML Bind Handlers which can interact and take full advantage of the internal data reactivity implementation.\n\nDon't be shy and take a look at the demo: https://bindrjs.vercel.app/\n\n## How to use\n\n```\n// Install with npm\nnpm install bindrjs\n```\n\n### JS\n#### Include the script tag your HTML\n```html\n\u003c!-- This will make the Bind object available globally in your scripts --\u003e\n\u003cscript src=\"node_modules/dist/index.js\"\u003e \u003c/script\u003e\n```\n\n### TS\n```typescript\n// Import the Bind class to your file\nimport { Bind } from 'bindrjs'\n```\n\n```javascript\n// New instance of Bind\nlet MainContent = new Bind({\n  // Id of the element that will benefit from the Bind context\n  id: 'main-content', // (Required)\n  // HTML template string or path to HTML file, if provided it will replace\n  // the content of the container found with the id (paths only work when running the app in a live server)\n  template: '', // (Optional)\n  // Reactive properties that will be provided in the template \n  bind: { // (Optional)\n    // These are accessible in the template trough the \"this\" keyword\n    text: 'Hello world!'\n  }\n});\n\n// This is 100% reactive!\nMainContent.bind\n\n// You can access the properties of the Bind instance\nconsole.log(MainContent.bind.text);\n// \u003e Hello world!\n\n// And reassign them\nMainContent.bind.text = 'Changing reactive data';\n// Now any part of the template that depends on \"this.text\" property WILL automatically be updated accordingly\n```\n\n### TS type safety:\nYou can have type safety when using TS by providing your own interface to the Bind class\n```ts\ninterface IHomeView {\n  header: string\n}\n\nlet HomeBind = new Bind\u003cIHomeView\u003e({\n  id: 'home',\n  bind: {\n    header: 0 // This will error out because IHomeView interface requests a string\n  }\n});\n\nlet bind = HomeBind.bind // The reactive bind object will follow the IHomeView interface, and provide any intellisense available from your IDE\n```\n\n\n## Contribute!\n\n### Download the code\n\n```\n// Clone repository\ngit clone https://github.com/DavidMunozMartinez/bindrJS.git\n// Go to directory\ncd bindrjs\n// Install dependencies\nnpm run install\n```\n### Compile\n```\nnpm run compile\n```\n### Examples\n```\nnpm run examples\n```\nThis will run the examples page (https://bindrjs.vercel.app/) locally\n\n### Test\n```\nnpm run test\n```\n\n### Things that have been built using BindrJS\nhttps://github.com/DavidMunozMartinez/files-sorter\n\n\nThanks for passing by, more things are under active development. HAPPY CODING!\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavidmunozmartinez%2Fbindrjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdavidmunozmartinez%2Fbindrjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavidmunozmartinez%2Fbindrjs/lists"}