{"id":19248287,"url":"https://github.com/anshu-krishna/bindable-template","last_synced_at":"2025-08-15T21:32:08.533Z","repository":{"id":127241734,"uuid":"349249695","full_name":"anshu-krishna/Bindable-Template","owner":"anshu-krishna","description":"Create template HTML with one-way DOM binding.","archived":false,"fork":false,"pushed_at":"2022-05-19T09:09:12.000Z","size":27,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-23T16:14:53.498Z","etag":null,"topics":["data-binding","javascript","oneway-data-binding"],"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/anshu-krishna.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-03-18T23:57:51.000Z","updated_at":"2022-04-12T05:59:48.000Z","dependencies_parsed_at":null,"dependency_job_id":"e2f96059-005e-42c9-829e-2012a624b421","html_url":"https://github.com/anshu-krishna/Bindable-Template","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/anshu-krishna/Bindable-Template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anshu-krishna%2FBindable-Template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anshu-krishna%2FBindable-Template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anshu-krishna%2FBindable-Template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anshu-krishna%2FBindable-Template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/anshu-krishna","download_url":"https://codeload.github.com/anshu-krishna/Bindable-Template/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anshu-krishna%2FBindable-Template/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270631844,"owners_count":24619380,"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","status":"online","status_checked_at":"2025-08-15T02:00:12.559Z","response_time":110,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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","oneway-data-binding"],"created_at":"2024-11-09T18:07:13.395Z","updated_at":"2025-08-15T21:32:08.512Z","avatar_url":"https://github.com/anshu-krishna.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Bindable Template\r\n#### Version 2.0 (or Version 4 of One-way DOM Binder)\r\n##### Note: This version is ***not*** compatible with the older versions.\r\n___\r\nThis library provides a class called ```Bindable``` which facilitates creating template HTML with one-way DOM binding. It allows us to specify the binding sites using a *moustache* like syntax. e.g. -\u003e '{{name}}'.\r\n\r\nSee the example file for more details.\r\n\r\n## Installation:\r\nImport from: [https://cdn.jsdelivr.net/gh/anshu-krishna/Bindable-Template@2.0/bindable.min.js](https://cdn.jsdelivr.net/gh/anshu-krishna/Bindable-Template@2.0/bindable.min.js)\r\n```javascript\r\nimport { Bindable } from 'https://cdn.jsdelivr.net/gh/anshu-krishna/Bindable-Template@2.0/bindable.min.js';\r\n```\r\n\r\n## Example:\r\n\r\n```html\r\n\u003cdiv id=\"d1\"\u003e\r\n\t\u003cb\u003eDate:\u003c/b\u003e {{date}}\r\n\t\u003cbr /\u003e\r\n\t\u003cb\u003eReadable Date:\u003c/b\u003e {{ @readableDate(date) }}\r\n\tName: {{name}}; Age: {{age}};\r\n\t\u003cdiv data-info=\"NameUpperCase: {{name.toUpperCase()}}; Age: {{age}}; Msg: {{msg}}\" data-name=\"{{name}}\"\u003e\r\n\t\tName UpperCase: \u003cb\u003e{{ name.toUpperCase() }}\u003c/b\u003e; Age: \u003cb\u003e{{age}}\u003c/b\u003e;\r\n\t\u003c/div\u003e\r\n\t\u003cdiv\u003e\r\n\t\tData: {{info}}\r\n\t\t\u003cbr /\u003e\r\n\t\tGlobal Function: {{\r\n\t\t\t/* Comments are allowed inside a expression. */\r\n\t\t\t#Math.random() // This returns random floats [0, 1];\r\n\t\t}}\r\n\t\t\u003cbr /\u003e\r\n\t\tLocal Function: {{\r\n\t\t\t#parseInt(@mul(#Math.random(), 100)) // This returns random integers [0, 100]\r\n\t\t}}\r\n\t\t\u003cbr /\u003e\r\n\t\tDelayed Function: {{\r\n\t\t\t// Async functions are allowed;\r\n\t\t\t@delayedInt(1000)\r\n\t\t}}\r\n\t\u003c/div\u003e\r\n\t{{msg}}\r\n\t\u003cspan data-name=\"{{ @join('-', name, age, 'test') }}\"\u003e\u003c/span\u003e\r\n\u003c/div\u003e\r\n\u003cscript type=\"module\"\u003e\r\n\timport { HTML } from 'https://cdn.jsdelivr.net/gh/anshu-krishna/HTML-Tagged-Template-Literals@3.0.1/html-ttl.min.js';\r\n\timport { Bindable } from './bindable.js';\r\n\r\n\tconst manager = new Bindable(document.querySelector('#d1'));\r\n\tconst { values, funcs } = manager;\r\n\t\r\n\tfuncs.readableDate = function (val) {\r\n\t\tconst d = Date.parse(val);\r\n\t\tif(isNaN(d)) { return 'Invalid date'; }\r\n\t\treturn new Intl.DateTimeFormat('en-GB', {\r\n\t\t\tday: '2-digit',\r\n\t\t\tmonth: 'short',\r\n\t\t\tyear: 'numeric'\r\n\t\t}).format(d);\r\n\t};\r\n\tfuncs.delayedInt = async function (delay) {\r\n\t\tawait new Promise(resolve =\u003e setTimeout(resolve, delay));\r\n\t\treturn parseInt(Math.random() * 100);\r\n\t};\r\n\r\n\tvalues.name = 'Krishna';\r\n\tvalues.date = '2022-05-19';\r\n\tvalues.info = {a : 10, b : 20};\r\n\tvalues.age = 200;\r\n\tvalues.msg = HTML`\u003cb\u003eReplacing TextNode with a HTMLElement\u003c/b\u003e`;\r\n\r\n\t// All keys\r\n\tconsole.log('All keys', Object.keys(values));\r\n\u003c/script\u003e\r\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanshu-krishna%2Fbindable-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fanshu-krishna%2Fbindable-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanshu-krishna%2Fbindable-template/lists"}