https://github.com/liby99/jquery-template
Simple and robust jQuery template plugin for front-end rendering
https://github.com/liby99/jquery-template
Last synced: 3 months ago
JSON representation
Simple and robust jQuery template plugin for front-end rendering
- Host: GitHub
- URL: https://github.com/liby99/jquery-template
- Owner: Liby99
- License: mit
- Created: 2017-12-01T06:07:59.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2017-12-01T08:48:46.000Z (over 7 years ago)
- Last Synced: 2025-01-21T10:51:05.434Z (4 months ago)
- Language: HTML
- Size: 51.8 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# JQuery Template
## Introduction
jQuery Template is a simple yet robust front-end templating plugin for jQuery,
supporting any JavaScript Syntax, function calling, list rendering, template
nesting and lot more.
## Download & Installation
Download `/src/jquery-template.js` to your website `/js` directory, and
import it in your html file by
```html
```
It will be ready to use!
## Getting Started
Prior to the use of this plugin, you need:
1. A HTML5 supported Template with name `hello`:
``` html
Hello,
```
2. A JSON Format Data:
``` js
var data = {
id: "a93e1cff0da",
name: "John Doe"
}
```
Then in the front-end, rendering is as easy as:
``` js
$("#container").render("hello", data);
```
The result will then be
``` html
Hello, John Doe
```
## API
#### `$(selector).render("", )`
- ``: String
Template name is the name of the template in html (e.g.
``). Note that the template must be in
`template` tag with a `name` attribution so that we can find the template
by its name.
- ``: Array *OR* Any other object
If the data is an array, say `arr`, then the plugin will render `arr.length`
instances of the same template `` each serving an element of `arr`.
If the data is any other object, you can reference, in Template elements'
attributions, using `data`. We will explain more in the next section
#### Template data fields
1. To put the data as texts to the template, we use attribution `data-text`:
``` html
```
``` js
$("#container").render("student", {
firstName: "John",
lastName: "Doe"
});
```
Will result in
``` html
John
Doe
```
2. To put extra html into an element, we use attribution `data-html`:
``` html
```
``` js
$("#container").render("student", {
html: "click here"
});
```
Result:
``` html
```
3. You can also prepend or append html elements using `data-prepend` and
`data-append`:
``` html
- Hobby 1
- Hobby 2
```
``` js
$("#container").render("student", {
before: "
after: "
});
```
Result:
``` html
```
4. You can add class to an element by using `data-class`.
``` html
This will be hidden
```
> Note that here we used a js syntax expression
> `data.hidden ? 'hidden' : ''`. This is very convenient for most of the
> users since you will not need to finish processing all the information
> prior to rendering. If sometimes simple expression are not working
> as expected, you can even *call globally accessible functions*!
``` js
$("#container").render("student", {
hidden: true
});
```
Result:
``` html
This will be hidden
```
5. You can add css to an element by using `data-css`.
``` html
This is red
```
``` js
$("#container").render("student", {
css: {
color: "red"
}
});
```
Result:
``` html
This is red
```
6. For the following keywords, using `data-` will directly add ``
attribute to the element. For example, setting `data-id` to `'asdf'` will
result in `id="asdf"`:
``` html
```
``` js
$("#container").render("student", {
pid: "as0dfja0g",
name: "John Doe"
});
```
Will result in
``` html
```
> Note: if possible, please do not use multiple tags that might result in
> conflicts in a single element. Because that might cause unexpected behavior.
> For Example, do not use `data-html` and `data-text` on a single element
> at the same time.
#### Rendering List
Putting a list into the data will resulting in rendering the specified template
multiple times.
``` html
```
``` js
$("#container").render("hobby", [
{ id: "1", hobby: "play basketball" },
{ id: "2", hobby: "watch movie" },
{ id: "3", hobby: "go to restaurant" },
{ id: "4", hobby: "drive" },
{ id: "5", hobby: "ski" }
])
```
Result:
``` html
- play basketball
- watch movie
- go to restaurant
- drive
- ski
```
#### Nesting Template
In this example, we want to render multiple students, each has their own list
of hobbies. So within a single student template, there will be multiple hobbies
being rendered. Let's take a look at how we are going to achieve this.
``` html
My Hobbies:
```
Note that in the `ul` tag in `student` template, we use `template-name` attr to
specify which template we want to use to nest the list, and `template-data` attr
to tell the renderer which data to use to render the template. Note that here,
the `template-data` does not need to be an array. It can be anything as long
as it suits the sub-template.
Also note that in `hobby` template, the `data-text` attr only has `data`. This
is because the hobby is just a string (but not object or other stuff). So you
can just use data to put the hobby `string` inside the `li` tag.
``` js
$("#container").render("student", [
{
firstName: "John",
lastName: "Doe",
hobbies: [ "hobby 0", "hobby 1", "hobby 2" ]
},
{
firstName: "Liby",
lastName: "99",
hobbies: [ "programming", "jquery" ]
},
{
firstName: "Kizuna",
lastName: "Ai",
hobbies: [ "play games", "dance" ]
}
]);
```
Voila! The result is just as simple as expected:
``` html
-
John
Doe
- Hobby 0
- Hobby 1
- Hobby 2
-
Liby
99
- programming
- jquery
-
Kizuna
Ai
- play games
- dance
```
## Examples
There are much more examples inside `/example` folder. Please pay there a visit
if there's anything unclear after this README.
## Contribution
Super open for contribution! Ping me for any question or advice and welcome
to submit a pull request!