JSON template engine--arttemplate

Typically, when we use AJAX to request data to get a JSON-formatted response body, and to populate the corresponding data to the HTML page, it may be necessary to splice the string itself, it is more troublesome, and the use of the template engine can help us to save ourselves the process of stitching strings.

Using the template engine is in fact pre-written HTML structure code, and then call the template engine third-party library, automatically populate the data into this HTML.

Today is to introduce the Arttemplate template framework,: github.com/aui/art-template, unzip after downloading, and then find the Lib folder, put the Template-web.js file inside your project directory

1. Basic Use 1.1 Preparing a template

1 <Scripttype= "xxxx"ID= "TPL">2     <P>3 My name<span><%=name%></Span>, <span><%= age%< this year./span>years old.4     </p>5 </Script>        

Description

• To use the script tag, you must give the type attribute, but the value can be arbitrarily written, as long as it is not text/javascript possible, but we generally writetext/html
  

• You must add the ID to this script tag , because you need to find the template in the tag later

• The template is the future want to display the HTML code, but some of the values can not be written to die, according to the JSON data to fill, so do not write dead data <%= 属性名 %> wrapped up

1.2 Importing Frames

<src= "./template-web.js"></script>

1.3 Filling the template

1 // JSON string converted to object 2 var obj = json.parse (xhr.responsetext); 3 4 // The TPL is found and populated with the Obj object, and the result is a piece of HTML code 5 var html = template (' TPL ', obj); 6 7 // Print See results 8 console.log (HTML);

Printing results are:

• As you can see, when the template engine is used, the value of the JSON corresponding property is automatically populated to the same property name in the template, such as

2 populating a JSON array with a template 2.1 Preparing the template

1<script type= "text/html" id= "TPL" >2<!--list is our own virtual array name.3 when the JSON data is received, assign the JSON array to the list4 you can automatically traverse each data in the JSON array into a TR display.5-6<% for(vari = 0;i < list.length; i++) {%>7 8<tr>9<td><%= list[i][' Id ']%></td>Ten<td><%= list[i][' name ']%></td> One<td><%= list[i][' age ']%></td> A<td><%= list[i][' score ']%></td> -</tr> -<%}%> the</script>

• Description: List this name can be random, when filled with templates, the real JSON array is passed to the list can be filled with

2.2 Import Framework (same as basic use) 2.3 Filling the template

1 var data = json.parse (xhr.responsetext); 2 // parameter 2:list:data  means to replace the real JSON array of data with the list value in the template 3var html = template (' TPL ', {list: Data}); 4 document.queryselector (' tbody '). InnerHTML = html;

• Note: The array in the template is called list, then parameter 2 is also called List, be careful not to write wrong.

3 Using the framework built-in traversal syntax 3.1 Syntax

{Each list value key}}

• Description

  • List is a virtual array or object of its own definition, which is replaced with a real JSON array or object when using a template

  • If the list is an object, then value is the property value, and if the list is an array, then the value gets the element

  • If list is an object, then key is the property name, and if list is an array, then key is the subscript

Cases:

1 <Scripttype= "text/html"ID= "TPL">2 3 {Each list value key}}4          <TR>5              <TD>{{value.} Id}}</td>6              <TD>{{Value.name}}</td>7              <TD>{{Value.age}}</td>8              <TD>{{Value.score}}</td>9          </tr>Ten          {{/Each }} One  A </Script>

3.2 calling a template

1 // convert the message to a JSON array 2 var data = json.parse (xhr.responsetext); 3 // Replace with template 4 var html = template (' TPL ', {list:data}); 5 // the replaced content is placed on the Web page 6 document.queryselector (' tbody '). InnerHTML = html;

3.3 Illustrations

The basic use of the Arttemplate template engine so, follow the steps to be able to, hope that everyone's learning to help