View on GitHub

jquery-template-plugin

A simple jQuery plugin which generates dynamic html content using the template and the json object passed.

Download this project as a .zip file Download this project as a tar.gz file

Plugin Syntax (Demo)

$.fn.jsTemplate(config);
The config can have the below properties:

htmlTemplate (Demo)

This is a simple HTML that would consist of markup's known as template tags. A template tag can be as simple as {@:name} (where 'name' is one of the properties in the json object)
Below is an example of how a template would look like: 
<div id="{@:id}" class="row"><div>{@:name}</div><div>{@:email}</div></div>

jsonObjects - (JSON or Array) (Demo)

The data passed in can either be a simple JSON or an Array.

Data as a simple JSON could look as below: 
{
    {
        "id": 12345,
        "name": "User One",
        "email": "user.one@email.com"
    },{
        "id": 23456,
        "name": "User Two",
        "email": "user.two@email.com"
    },{
        "id": 34567,
        "name": "User Three",
        "email": "user.three@email.com"
    }
    .
    .
    .
}

Data as an Array could look as below: 
["User One", "User Two", "User Three", ... "User N"]

highlight (optional) (Demo)

This is an optional property for highligting the text in the constructed HTML using the template.

It has the following default construct: 
"highlight": {
    "apply": false,
    "markup": "<u>,</u>",
    "value": ""
}

property (optional) (Demo)

This is an optional property that has to be used if the passed in data is an Array of string. This is nothing but an indication as to which template tag needs to be replaced with the values of the Array.

If the template being passed in is as below: 
<div class="row"><div>{@:name}</div></div>

And, the data is an Array of string as below: 
["User One", "User Two", "User Three", ... "User N"]

Then, the property parameter would be 'name'.

Examples (Demo)

Example-1: JSON as input data. 
$.fn.jsTemplate({
  "template": '<div class="row"><div>{@:name}</div><div>{@:email}</div></div>',
  "jsonObjects": [{
    "id": 12345,
    "name": "User One",
    "email": "user.one@email.com"
  },{
    "id": 23456,
    "name": "User Two",
    "email": "user.two@email.com"
  },{
    "id": 34567,
    "name": "User Three",
    "email": "user.three@email.com"
  }],
  "highlight": {
    "apply": false,
    "markup": "<u>,</u>",
    "value": ""
  }
});

Example-2: Array of string as input data. 
$.fn.jsTemplate({
  "template": '<div class="row"><div>{@:name}</div></div>',
  "jsonObjects": ["User One", "User Two", "User Three", ... "User N"]
  "prop": "name"
});


prop
 / 
highlight
 / 
jsonObjects
 / 
htmlTemplate
 / 
Syntax
Properties Values
Template:
Data:
Highlight (optional): Enable Default: false
Markup (optional): Default: <u>,</u>
Values (optional): Default: ""
Property (optional): Default: null