https://github.com/anshu-krishna/bindable-template
Create template HTML with one-way DOM binding.
https://github.com/anshu-krishna/bindable-template
data-binding javascript oneway-data-binding
Last synced: 11 months ago
JSON representation
Create template HTML with one-way DOM binding.
- Host: GitHub
- URL: https://github.com/anshu-krishna/bindable-template
- Owner: anshu-krishna
- License: mit
- Created: 2021-03-18T23:57:51.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2022-05-19T09:09:12.000Z (about 4 years ago)
- Last Synced: 2025-02-23T16:14:53.498Z (over 1 year ago)
- Topics: data-binding, javascript, oneway-data-binding
- Language: JavaScript
- Homepage:
- Size: 26.4 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Bindable Template
#### Version 2.0 (or Version 4 of One-way DOM Binder)
##### Note: This version is ***not*** compatible with the older versions.
___
This 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. -> '{{name}}'.
See the example file for more details.
## Installation:
Import 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)
```javascript
import { Bindable } from 'https://cdn.jsdelivr.net/gh/anshu-krishna/Bindable-Template@2.0/bindable.min.js';
```
## Example:
```html
Date: {{date}}
Readable Date: {{ @readableDate(date) }}
Name: {{name}}; Age: {{age}};
Name UpperCase: {{ name.toUpperCase() }}; Age: {{age}};
Data: {{info}}
Global Function: {{
/* Comments are allowed inside a expression. */
#Math.random() // This returns random floats [0, 1];
}}
Local Function: {{
#parseInt(@mul(#Math.random(), 100)) // This returns random integers [0, 100]
}}
Delayed Function: {{
// Async functions are allowed;
@delayedInt(1000)
}}
{{msg}}
import { HTML } from 'https://cdn.jsdelivr.net/gh/anshu-krishna/HTML-Tagged-Template-Literals@3.0.1/html-ttl.min.js';
import { Bindable } from './bindable.js';
const manager = new Bindable(document.querySelector('#d1'));
const { values, funcs } = manager;
funcs.readableDate = function (val) {
const d = Date.parse(val);
if(isNaN(d)) { return 'Invalid date'; }
return new Intl.DateTimeFormat('en-GB', {
day: '2-digit',
month: 'short',
year: 'numeric'
}).format(d);
};
funcs.delayedInt = async function (delay) {
await new Promise(resolve => setTimeout(resolve, delay));
return parseInt(Math.random() * 100);
};
values.name = 'Krishna';
values.date = '2022-05-19';
values.info = {a : 10, b : 20};
values.age = 200;
values.msg = HTML`<b>Replacing TextNode with a HTMLElement</b>`;
// All keys
console.log('All keys', Object.keys(values));
```