https://github.com/yunisdev/templatit
Lightweight JS library to templating
https://github.com/yunisdev/templatit
Last synced: 8 days ago
JSON representation
Lightweight JS library to templating
- Host: GitHub
- URL: https://github.com/yunisdev/templatit
- Owner: yunisdev
- License: mit
- Created: 2021-01-14T19:34:46.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2021-01-20T15:17:39.000Z (over 5 years ago)
- Last Synced: 2025-08-12T02:19:37.459Z (10 months ago)
- Language: JavaScript
- Homepage:
- Size: 9.77 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Templatit
## Installation
Add Templatit to your HTML File:
```html
```
## Usage
There is 2 ways to use Templatit:
- Functional
- Class based
### Functional
For using functional way, you have to use `template` tag and give it a unique id. For example,
```html
Hello {name}!
```
To use this template,
```js
console.log(
templatit("#alert-template", {
name: "Yunis",
})
);
// it will output rendered template.
// Hello Yunis!
```
You can also use `templatit` function without creating template tag. Like this one.
```js
templatit(
null,
{
name: "Yunis",
},
"Hello {name}!"
);
// Hello Yunis!
```
This way of using `templatit` function is not recommended. There is better way to do it — class based templates.
### Class based
Class based templates is better for adding template string to your javascript code.
```js
var template = new Templatit("Hello {name}!");
template.render({
data: {
name: "Yunis",
},
callback: window.alert,
});
```
This will automatically render template and show it in alert box.
Also you can use `where` to render template to html element with specific selector.
```js
template.render({
data: {
name: "Yunis",
},
where: "#hello-box",
});
```
You can also pass array to `data` parameter. It will render all data inside array and join them. It is useful when fetching comments, any type of list or etc.
When using array for data, you are able to use `seperator`. Example, you can use `seperator:'\n'` or `seperator:'
'` for render each data in new line.
---
Both ways has its own usage scenario. You can use them in specific situations.
Thanks for reading README of this project. Feel free to create an issue if you found any bug. You can also contribute it. Have a good coding!!!