README
Templatit
Installation
Add Templatit to your HTML File:
<script src="https://unpkg.com/templatit"></script>
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,
<template id="hello-template"> Hello {name}! </template>
To use this template,
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.
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.
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.
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:'<br>'
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!!!