Jquery Plugin-jtemplates (Template)

I. Brief Introduction

 

It is a javascript template engine developed based on jquery. Its main functions are as follows:

1. Obtain JSON data through javascript;

2. Obtain an HTML template and combine it with data to generate the HTML of the page.

2. Quick Start

Let's look at a simple example:

<SCRIPT type = "text/JavaScript" src = "jquery-1.2.6.pack.js"> </SCRIPT>
<SCRIPT type = "text/JavaScript" src = "jquery-jtemplates.js"> </SCRIPT>

<SCRIPT type = "text/JavaScript">
$ (Document). Ready (function (){
// Initialize data
VaR DATA = {
Name: 'user list ',
List_id: '000000 ',
Table :[
{ID: 1, name: 'rain', age: 22, mail: 'cssrain @ domain.com '},
{ID: 2, name: 'pt', age: 24, mail: 'cssrain @ domain.com '},
{ID: 3, name: 'kaka', age: 20, mail: 'cssrain @ domain.com '},
{ID: 4, name: 'play', age: 26, mail: 'cssrain @ domain.com '},
{ID: 5, name: 'yiyun', age: 25, mail: 'cssrain @ domain.com '}
]
};
// Attach a template
$ ("# Result1"). settemplateelement ("template ");
// Load data to the template
$ ("# Result1"). processtemplate (data );
});
</SCRIPT>

<! -- Template content -->
<Textarea id = "template" style = "display: none">
<Strong >{$ T. Name }:{$ T. list_id} </strong>
<Table>
<Tr>
<TH> Number </Th>
<TH> name </Th>
<TH> age </Th>
<TH> email </Th>
</Tr>
{# Foreach $ T. Table as record}
<Tr>
<TD >{$ T. Record. ID} </TD>
<TD >{$ T. Record. name} </TD>
<TD >{$ T. Record. Age} </TD>
<TD >{$ T. Record. Mail} </TD>
</Tr>
{#/}
</Table>
</Textarea>

<! -- Output element -->
<Div id = "result1"> </div>

AboveCodeAnd then import jtemplates. js.

Next, we create a JSON object for data.

VaR DATA = {
......
};

Add an output element and a template element to the HTML page:

Finally, add templates and data to the output element in Js.

After running the code, the interface shown in is displayed.

3. Load the Template

This time, the template is placed in a separate page, rather than directly written in the page.

Create a new template.html and put the following code:

<Strong >{$ T. Name }:{$ T. list_id} </strong>
<Table>
<Tr>
<TH> Number </Th>
<TH> name </Th>
<TH> age </Th>
<TH> email </Th>
</Tr>
{# Foreach $ T. Table as record}
<Tr>
<TD >{$ T. Record. ID} </TD>
<TD >{$ T. Record. name} </TD>
<TD >{$ T. Record. Age} </TD>
<TD >{$ T. Record. Mail} </TD>
</Tr>
{#/}
</Table>

Create a new JSON file named CS. JSON. The Code is as follows:

{
Name: "user list ",
List_id: "89757 ",
Table :[
{ID: 1, name: 'rain', age: 22, mail: 'cssrain @ domain.com '},
{ID: 2, name: 'pt', age: 24, mail: 'cssrain @ domain.com '},
{ID: 3, name: 'kaka', age: 20, mail: 'cssrain @ domain.com '},
{ID: 4, name: 'play', age: 26, mail: 'cssrain @ domain.com '},
{ID: 5, name: 'yiyun', age: 25, mail: 'cssrain @ domain.com '}
]
}

In jquery, you can use the $. Ajax () method to load JSON files. The Code is as follows:

<SCRIPT type = "text/JavaScript">
$ (Function (){
$. Ajax ({
Type: "Post ",
Datatype: "JSON ",
URL: "CS. JSON ",
Success: function (data ){
.....
}
});
});
</SCRIPT>

In the success callback function, you must first set a template and then add data. The following code is used:

Success: function (data ){

// Set the Template
$ ("# Result1"). settemplateurl ("template.html? Date = "+ (+ new date (), null, {filter_data: true });
// Load data
$ ("# Result1"). processtemplate (data );
}
}

The complete code is as follows:

$ (Function (){
$. Ajax ({
Type: "Post ",
Datatype: "JSON ",
URL: "CS. JSON ",
Success: function (data ){
$ ("# Result1"). settemplateurl ("template.html? Date = "+ (+ new date (), null, {filter_data: true });
$ ("# Result1"). processtemplate (data );
}
});
});

After running the code, you can also get the interface.

 

Iv. Summary

For the abbreviated method of new date (). gettime (), refer to this article.Article:

Http://www.cssrain.cn/article.asp? Id = 1116

Some examples provided by cssrain are officially written as follows:

Click to download this file

Jtemplates official homepage:

Http://jtemplates.tpython.com/

Official examples:
1. Simple template (see source as description)
Example1.html

2. Example 1 + multiple elements + Parameters
Example2.html

3. Example 1 (valid XHTML 1.1 !)
Example3.html

4. multitemplate (valid XHTML 1.1)
Example4.html