{"id":23773749,"url":"https://github.com/beenotung/data-template","last_synced_at":"2026-02-24T15:32:27.121Z","repository":{"id":61322917,"uuid":"544637672","full_name":"beenotung/data-template","owner":"beenotung","description":"Lightweight and minimal dom template and ajax helpers","archived":false,"fork":false,"pushed_at":"2023-12-15T02:48:53.000Z","size":162,"stargazers_count":18,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-23T18:57:03.928Z","etag":null,"topics":["ajax","cdn-distribution","data-attributes","data-binding","dom","html-template","lightweight","minimal"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/data-template","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-2-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/beenotung.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":"2022-10-03T00:28:44.000Z","updated_at":"2024-03-29T18:12:12.000Z","dependencies_parsed_at":"2023-12-15T03:41:56.276Z","dependency_job_id":"85c9362d-777b-49ff-b4ba-7e6ef66fbdb0","html_url":"https://github.com/beenotung/data-template","commit_stats":{"total_commits":94,"total_committers":1,"mean_commits":94.0,"dds":0.0,"last_synced_commit":"47df6f2e447f893cad2465d5a2539e21a96b19e4"},"previous_names":[],"tags_count":29,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beenotung%2Fdata-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beenotung%2Fdata-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beenotung%2Fdata-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beenotung%2Fdata-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/beenotung","download_url":"https://codeload.github.com/beenotung/data-template/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239961632,"owners_count":19725588,"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":["ajax","cdn-distribution","data-attributes","data-binding","dom","html-template","lightweight","minimal"],"created_at":"2025-01-01T05:42:05.230Z","updated_at":"2025-10-26T10:36:46.443Z","avatar_url":"https://github.com/beenotung.png","language":"HTML","readme":"# data-template\n\nLightweight and minimal HTML template helpers powered by native DOM\n\n[![npm Package Version](https://img.shields.io/npm/v/data-template)](https://www.npmjs.com/package/data-template)\n[![Minified Package Size](https://img.shields.io/bundlephobia/min/data-template)](https://bundlephobia.com/package/data-template)\n[![Minified and Gzipped Package Size](https://img.shields.io/bundlephobia/minzip/data-template)](https://bundlephobia.com/package/data-template)\n\nServer-side-rendering (SSR) mode available via [node-data-template](https://github.com/beenotung/node-data-template)\n\n## Installation (with CDN)\n\nDrop below line in your html with automatic patch updates:\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/data-template@1.10/base.js\"\u003e\u003c/script\u003e\n```\n\n\u003cdetails\u003e\n\u003csummary\u003eOr specify the exact version with integrity protection:\u003c/summary\u003e\n\n```html\n\u003cscript\n  src=\"https://cdn.jsdelivr.net/npm/data-template@1.10.1/base.js\"\n  crossorigin=\"anonymous\"\n  integrity=\"sha384-i35RjawhK9lVyGUZOl8bMw50PRHWqwOuSPnMCq69WytKJ5Tqx9FhZ4SRIjQfp6yZ\"\n\u003e\u003c/script\u003e\n```\n\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eYou can use the minified version as well:\u003c/summary\u003e\n\n```html\n\u003cscript\n  src=\"https://cdn.jsdelivr.net/npm/data-template@1.10.1/base.min.js\"\n  crossorigin=\"anonymous\"\n  integrity=\"sha384-HdiWx6gZdhakPcyhM4tZ1XImMYkFBV5QPz+F+e3J6gJub1djlJk8DbWTd8tub0Ib\"\n\u003e\u003c/script\u003e\n```\n\n\u003c/details\u003e\n\n## Get Started (with template project)\n\nFor new project without existing files, you can use the `data-template` cli to setup a simple project from template.\n\n```bash\nnpx data-template my-app\ncd my-app\n# then see the guides in the console output and README.md file\n```\n\n## Features\n\n- [x] apply data into dom based on dataset (`data-*`) attributes\n- [x] auto repeat elements if the value is an array\n- [x] support fragments with [nested template](./template/public/examples/fragment.html#:L14)\n- [x] fetch and cache html template and api response with localStorage\n- [x] helper functions to do ajax and input format (date/time)\n- [x] lightweight, [1KB minified and gzipped](#size)\n\n**Supported `data-*` attributes**:\n\n| category | attributes                                   |\n| -------- | -------------------------------------------- |\n| general  | text, class, id, title                       |\n| link     | href                                         |\n| media    | src, alt                                     |\n| display  | hidden, show, if                             |\n| input    | value, checked, selected, disabled, readonly |\n| dialog   | open                                         |\n| form     | action, onsubmit                             |\n| event    | onclick                                      |\n\n## Quick Example with CDN\n\n(For script tag with exact version and integrity checksum, see [above section](#installation-with-cdn))\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/data-template@1.7/base.js\"\u003e\u003c/script\u003e\n\n\u003cheader id=\"header\" data-template=\"header.html\"\u003e\u003c/header\u003e\n\n\u003cmain id=\"main\" data-template=\"article\" data-bind=\"articles\"\u003e\n  loading articles...\n\u003c/main\u003e\n\n\u003ctemplate data-name=\"article\"\u003e\n  \u003carticle\u003e\n    \u003ch2 data-text=\"title\"\u003e\u003c/h2\u003e\n    \u003cul class=\"tags\"\u003e\n      \u003cli class=\"tag\" data-text=\"tags\"\u003e\u003c/li\u003e\n    \u003c/ul\u003e\n    \u003cp data-text=\"intro\"\u003e\u003c/p\u003e\n    \u003ca data-href=\"detail\" data-class=\"highlight\"\u003eDetails\u003c/a\u003e\n  \u003c/article\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  renderTemplate(header)\n\n  getJSON('/articles').then(articles =\u003e renderTemplate(main, { articles }))\n  /* sample data:\n  [\n    {\n      title: '...',\n      tags: ['a', 'b'],\n      intro: '...',\n      detail: '/article.html?id=1',\n      highlight: false,\n    },\n    {\n      title: '...',\n      tags: [],\n      intro: '...',\n      detail: '/article.html?id=2',\n      highlight: true,\n    },\n  ]\n  */\n\u003c/script\u003e\n```\n\nMore examples see [template/public](template/public)\n\n## Functions\n\n**Render Functions**:\n\n```javascript\n// render data-* attributes\nfunction renderData(container, values);\n\n// render template on specific host element\nfunction renderTemplate(hostElement, binds);\n\n// recursive scan for templates and render them\nfunction scanTemplates(rootElement, binds);\n\n// populate the form using values from the object\nfunction fillForm(form, object);\n```\n\n**Format Functions**:\n\n```javascript\n// prepend '0' of the number is less than ten\nfunction d2(number);\n\n// convert to 'YYYY-MM-DD' format for input[type=date]\nfunction toInputDate(date_or_time_or_string);\n\n// convert to 'HH:mm' format for input[type=time]\nfunction toInputTime(date_or_time_or_string);\n```\n\n**AJAX Functions**:\n\n```javascript\n// return promise of string, cached with localStorage\nfunction getText(url, options, callback);\n\n// return promise of json value, cached with localStorage\nfunction getJSON(url, options, callback);\n\n// submit form with ajax request in application/json\nfunction submitJSON(event_or_form): Promise\u003cResponse\u003e\n\n// submit form with ajax request in application/x-www-form-urlencoded or url search parameters\nfunction submitForm(event_or_form): Promise\u003cResponse\u003e\n\n// submit form with ajax request in multipart/form-data\nfunction uploadForm(event_or_form): Promise\u003cResponse\u003e\n\n// send ajax request in application/json\nfunction postJSON(url, body): Promise\u003cResponse\u003e\nfunction patchJSON(url, body): Promise\u003cResponse\u003e\nfunction putJSON(url, body): Promise\u003cResponse\u003e\n\n// send ajax request with DELETE method\nfunction del(url): Promise\u003cResponse\u003e\n```\n\nFor the `getText()` and `getJSON()` functions, the `options` and `cb` arguments are optional.\n\nThe `options` object is the second argument passed to the `fetch` function.\n\nThe `callback` function will be called with cached _and/or_ fetched data [(details)](#when-will-the-callback-function-be-called).\n\nIf is recommended to provide `{ cache: 'reload' }` in the `options` or use callback function to receive the data if you want to avoid staled view.\n\nThe returned promise can be used to do error handling.\n\n### When will the callback function be called\n\nIf the fetching data is already cached by url, the callback will be called immediately.\nThen the data will be fetched no matter cached or not.\nIf the newly fetched data is different from the cached data, the callback will be called again.\n\n## Size\n\n| Format         | File Size |\n| -------------- | --------- |\n| base.js        | 5.3 KB    |\n| base.min.js    | 2.9 KB    |\n| base.min.js.gz | 1.4 KB    |\n\n## License\n\nThis project is licensed with [BSD-2-Clause](./LICENSE)\n\nThis is free, libre, and open-source software. It comes down to four essential freedoms [[ref]](https://seirdy.one/2021/01/27/whatsapp-and-the-domestication-of-users.html#fnref:2):\n\n- The freedom to run the program as you wish, for any purpose\n- The freedom to study how the program works, and change it so it does your computing as you wish\n- The freedom to redistribute copies so you can help others\n- The freedom to distribute copies of your modified versions to others\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbeenotung%2Fdata-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbeenotung%2Fdata-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbeenotung%2Fdata-template/lists"}