Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/beenotung/data-template
Lightweight and minimal dom template and ajax helpers
https://github.com/beenotung/data-template
ajax cdn-distribution data-attributes data-binding dom html-template lightweight minimal
Last synced: 3 days ago
JSON representation
Lightweight and minimal dom template and ajax helpers
- Host: GitHub
- URL: https://github.com/beenotung/data-template
- Owner: beenotung
- License: bsd-2-clause
- Created: 2022-10-03T00:28:44.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2023-12-15T02:48:53.000Z (about 1 year ago)
- Last Synced: 2024-04-23T18:57:03.928Z (9 months ago)
- Topics: ajax, cdn-distribution, data-attributes, data-binding, dom, html-template, lightweight, minimal
- Language: HTML
- Homepage: https://www.npmjs.com/package/data-template
- Size: 158 KB
- Stars: 18
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# data-template
Lightweight and minimal HTML template helpers powered by native DOM
[](https://www.npmjs.com/package/data-template)
[](https://bundlephobia.com/package/data-template)
[](https://bundlephobia.com/package/data-template)
Server-side-rendering (SSR) mode available via [node-data-template](https://github.com/beenotung/node-data-template)
## Installation (with CDN)
Drop below line in your html with automatic patch updates:
```html
```
Or specify the exact version with integrity protection:
```html
```
You can use the minified version as well:
```html
```
## Get Started (with template project)
For new project without existing files, you can use the `data-template` cli to setup a simple project from template.
```bash
npx data-template my-app
cd my-app
# then see the guides in the console output and README.md file
```
## Features
- [x] apply data into dom based on dataset (`data-*`) attributes
- [x] auto repeat elements if the value is an array
- [x] support fragments with [nested template](./template/public/examples/fragment.html#:L14)
- [x] fetch and cache html template and api response with localStorage
- [x] helper functions to do ajax and input format (date/time)
- [x] lightweight, [1KB minified and gzipped](#size)
**Supported `data-*` attributes**:
| category | attributes |
| -------- | -------------------------------------------- |
| general | text, class, id, title |
| link | href |
| media | src, alt |
| display | hidden, show, if |
| input | value, checked, selected, disabled, readonly |
| dialog | open |
| form | action, onsubmit |
| event | onclick |
## Quick Example with CDN
(For script tag with exact version and integrity checksum, see [above section](#installation-with-cdn))
```html
loading articles...
Details
renderTemplate(header)
getJSON('/articles').then(articles => renderTemplate(main, { articles }))
/* sample data:
[
{
title: '...',
tags: ['a', 'b'],
intro: '...',
detail: '/article.html?id=1',
highlight: false,
},
{
title: '...',
tags: [],
intro: '...',
detail: '/article.html?id=2',
highlight: true,
},
]
*/
```
More examples see [template/public](template/public)
## Functions
**Render Functions**:
```javascript
// render data-* attributes
function renderData(container, values);
// render template on specific host element
function renderTemplate(hostElement, binds);
// recursive scan for templates and render them
function scanTemplates(rootElement, binds);
// populate the form using values from the object
function fillForm(form, object);
```
**Format Functions**:
```javascript
// prepend '0' of the number is less than ten
function d2(number);
// convert to 'YYYY-MM-DD' format for input[type=date]
function toInputDate(date_or_time_or_string);
// convert to 'HH:mm' format for input[type=time]
function toInputTime(date_or_time_or_string);
```
**AJAX Functions**:
```javascript
// return promise of string, cached with localStorage
function getText(url, options, callback);
// return promise of json value, cached with localStorage
function getJSON(url, options, callback);
// submit form with ajax request in application/json
function submitJSON(event_or_form): Promise
// submit form with ajax request in application/x-www-form-urlencoded or url search parameters
function submitForm(event_or_form): Promise
// submit form with ajax request in multipart/form-data
function uploadForm(event_or_form): Promise
// send ajax request in application/json
function postJSON(url, body): Promise
function patchJSON(url, body): Promise
function putJSON(url, body): Promise
// send ajax request with DELETE method
function del(url): Promise
```
For the `getText()` and `getJSON()` functions, the `options` and `cb` arguments are optional.
The `options` object is the second argument passed to the `fetch` function.
The `callback` function will be called with cached _and/or_ fetched data [(details)](#when-will-the-callback-function-be-called).
If is recommended to provide `{ cache: 'reload' }` in the `options` or use callback function to receive the data if you want to avoid staled view.
The returned promise can be used to do error handling.
### When will the callback function be called
If the fetching data is already cached by url, the callback will be called immediately.
Then the data will be fetched no matter cached or not.
If the newly fetched data is different from the cached data, the callback will be called again.
## Size
| Format | File Size |
| -------------- | --------- |
| base.js | 5.3 KB |
| base.min.js | 2.9 KB |
| base.min.js.gz | 1.4 KB |
## License
This project is licensed with [BSD-2-Clause](./LICENSE)
This 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):
- The freedom to run the program as you wish, for any purpose
- The freedom to study how the program works, and change it so it does your computing as you wish
- The freedom to redistribute copies so you can help others
- The freedom to distribute copies of your modified versions to others