{"id":15414812,"url":"https://github.com/aidenybai/dababy","last_synced_at":"2025-07-19T23:34:38.727Z","repository":{"id":53474888,"uuid":"352735396","full_name":"aidenybai/dababy","owner":"aidenybai","description":":trollface: Data binding so simple even DaBaby could do it!","archived":false,"fork":false,"pushed_at":"2025-05-12T23:14:05.000Z","size":178,"stargazers_count":29,"open_issues_count":0,"forks_count":3,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-05-13T00:23:55.051Z","etag":null,"topics":["alpine","dababy","dom","javascript","lucia","ui","vue"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/aidenybai.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"aidenybai"}},"created_at":"2021-03-29T17:53:19.000Z","updated_at":"2025-05-12T23:14:09.000Z","dependencies_parsed_at":"2022-09-10T02:40:07.429Z","dependency_job_id":null,"html_url":"https://github.com/aidenybai/dababy","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/aidenybai/dababy","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aidenybai%2Fdababy","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aidenybai%2Fdababy/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aidenybai%2Fdababy/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aidenybai%2Fdababy/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aidenybai","download_url":"https://codeload.github.com/aidenybai/dababy/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aidenybai%2Fdababy/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266041825,"owners_count":23867952,"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":["alpine","dababy","dom","javascript","lucia","ui","vue"],"created_at":"2024-10-01T17:04:55.407Z","updated_at":"2025-07-19T23:34:38.718Z","avatar_url":"https://github.com/aidenybai.png","language":"TypeScript","funding_links":["https://github.com/sponsors/aidenybai"],"categories":[],"sub_categories":[],"readme":"\u003cimg src=\"https://raw.githubusercontent.com/aidenybai/dababy/main/.github/dababy.jpg\" width=\"100\" align=\"right\"\u003e\n\n# Dababy\n\nData binding so simple even DaBaby could do it!\n\n## Installation\n\nPut this script tag between the `\u003chead\u003e` tags of your webpage.\n\n```html\n\u003cscript src=\"https://unpkg.com/dababy\"\u003e\u003c/script\u003e\n```\n\n## Dababy Quote Generator Example\n\n```html\n\u003cdiv data=\"{ quotes: ['LES GO', 'LESS GO', 'LESSS GO'] }\"\u003e\n  \u003cbutton ref=\"quote\" bind=\"{\n    onclick: () =\u003e {\n      const quote = quotes[Math.floor(Math.random() * quotes.length)];\n      refs.quote.innerHTML = quote;\n    }\n  }\"\u003e\u003cbutton\u003e\n\u003c/div\u003e\n```\n\n## Features\n\n### Data\n\nAdd the `data` attribute to an element to get started. The value of the attribute should be an object literal. Anything under that element will be able to access the data as global variables when binding.\n\n**Example:**\n\n```html\n\u003cdiv data=\"{ name: 'Dababy' }\"\u003e\n  \u003c!-- content here --\u003e\n\u003c/div\u003e\n```\n\n### Bind\n\nAdd the `bind` attribute to an element to bind properties, basically anything you can access in JavaScript like `innerHTML`, `onclick`, `style`, `id`, etc. This will attach it to the element\n\n**Example:**\n\n```html\n\u003cdiv data=\"{ name: 'Dababy' }\"\u003e\n  \u003cp bind=\"{ innerHTML: name }\"\u003e\u003c!-- Dababy --\u003e\u003c/p\u003e\n\u003c/div\u003e\n```\n\n### Refs\n\nAdd the `ref` attribute to create markers that act like shorthands for `document.querySelector`. Attach it to an element and name it in the attribute value, then access it later by doing `refs.\u003cname\u003e`\n\n**Example:**\n\n```html\n\u003cdiv data=\"{ name: 'Dababy' }\"\u003e\n  \u003cp ref=\"name\"\u003e: turned into a convertable\u003c/p\u003e\n  \u003cp bind=\"{ innerHTML: name + refs.name.innerHTML }\"\u003e\u003c!-- Dababy: turned into a convertable --\u003e\u003c/p\u003e\n\u003c/div\u003e\n```\n\n---\n\n© 2021 Aiden Bai\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faidenybai%2Fdababy","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faidenybai%2Fdababy","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faidenybai%2Fdababy/lists"}