jtemplate--jquery-based JavaScript front-page template engine

reference:http://blog.csdn.net/lexinquan/article/details/6674102

http://blog.csdn.net/kuyuyingzi/article/details/38351867

The jtemplates contains three predetermined global variables, namely $T, $P, $Q. $T provides the data invocation function for the template, $P provides the parameter variable invocation function for the template, $Q. Version provides the current jtemplate
These features will be used as described below.

Jtemplates also supports #if, #for, #cycle, #foreach, #include, #param tags to help you handle complex business situations.

Data preparation: [JavaScript] View plaincopyprint?

vardata ={totalcount: -, lists:[{Id:'2001', Title:'News', CreateDate:'2011-08-08'}, {Id:'2002', Title:'News', CreateDate:'2011-08-08'}, {Id:'2003', Title:'News', CreateDate:'2011-08-08'}, {Id:'2004', Title:'News', CreateDate:'2011-08-08'}, {Id:'2005', Title:'News', CreateDate:'2011-08-08'},  ]  }  

1, the introduction of library files [JavaScript]View Plaincopyprint?

<script type="text/javascript" src="jquery.js"></ script>  <script type="text/javascript" src= " Jquery-jtemplates.js"></script>  

2. Writing a template

[HTML] view Plaincopyprint?

<div id="<span style="Color: #FF0000;">result</span>"></div> <div id="TemplateContainer"style="Display:none;"> <table> <tr><td>Id</td><td> title </td><td> release Time </td></tr>  {#foreach$T. Table asRow}<tr><td>{$T. row.id}</td><td>{$T. row.title}</td><td>{$T .row.createdate}< /td></tr>  {#/ for}  </table> </div>

Syntax:  1. curly braces {..}, in which you can write any JavaScript code, such as {$T. toUpperCase ()} 2, {$T}: Represents data, such as the example above, $T. Table represents the Table object that gets data, $T. TotalCount is 64. 3. {#foreach}: Loop to get the data, as above: {#foreach $T. Table as row} {$T. row.title} {/for} Extended Syntax:   {#if}   Example:

{#if

{#if $T. list_id = = 3} System List {#elseif $T. list_id = = 4} The Users list {#elseif $T. list_id = 5} Errors list {#/if}  

{#foreach}

{#foreach as |name| [begin=| Code|] [count=| Code|] [step=| Code|]}.. {#else}: {#/for}  

Example:A, output all data:

{#foreach as row}      {$T. Row.title}      {/for}   

b, start the output from the second record:

{#foreach as row begin=1}      {$T. Row.title}      {/for}    

C, starting from the second and taking only 2 articles

{#foreach as row begin=1 count=2}      {$T. Row.title}      {/for}   

D. Using step

{#foreach as row step=2}      {$T. Row.title}      {/for}  

E, use Else

{#foreach as row step=2}      {$T. Row.title}  {#else}   No record   {/for}   

{#for}

Example:

{#for1} {$T. Index} {#/for}  

{#for1 step=3} {$T. Index} {#/for}  

3. Render the template and show

<script type="Text/javascript">$ (document). Ready (function () {//set up a template$("#result"). Settemplateelement ("TemplateContainer"); //Working with Templates$("#result"). ProcessTemplate (data);       }); </script>

There are several ways to set up a template: A. Settemplateelement:parameter is an element ID in the page as in the example above B. SetTemplate:The parameters are specific to the template content, such as: $ ("#result"). SetTemplate ("template by {$T. Bold ()} version <em>{$Q. Version}</em>."); C.settemplateurl:Use external standalone template file URLs as parameters such as: $ ("#result"). Settemplateurl ("Example_multitemplate1.tpl"); 4, operation result: complete code

"Text/javascript"Src="Jquery.js"></script> <script type="Text/javascript"Src="Jquery-jtemplates.js"></script> <title>jTemplates</title> <script type="Text/javascript">vardata ={totalcount: -, lists:[{Id:'2001', Title:'News', CreateDate:'2011-08-08'}, {Id:'2002', Title:'News', CreateDate:'2011-08-08'}, {Id:'2003', Title:'News', CreateDate:'2011-08-08'}, {Id:'2004', Title:'News', CreateDate:'2011-08-08'}, {Id:'2005', Title:'News', CreateDate:'2011-08-08'},                  ]          }; $ (document). Ready (function () {//set up a template$("#result"). Settemplateelement ("TemplateContainer"); //Working with Templates$("#result"). ProcessTemplate (data);       }); </script> "result"> </div> <textarea id="TemplateContainer"style="Display:none;"> <table border="1"> <tr> <td>Id</td> <td>title</td> <td>Release Time</td> </tr>              {#foreach$T. Lists asRow}<tr> <td>{$T. row.id}</td> <td>{$T. Row.title}</td> <td>{$T. row.createdate}</td> </tr>              {#/ for}          </table> </textarea> </body> 
jtemplate--jquery-based JavaScript front-page template engine