Which of the following is the JS template engine?

JS template engine
The template engine is generated to separate the user interface from the business data (content). It can generate documents in a specific format. The template engine for websites generates a standard HTML document.

The JS template engine includes the following:
Template
Official reference: http://aui.github.io/artTemplate
Baidutemplate
Official reference: http://baidufe.github.io/BaiduTemplate
Juicer
Official reference: http://juicer.name
Dot
Official reference: http://olado.github.io/doT
Kissy
Official reference: http://docs.kissyui.com and https://github.com/kissyteam/kissy
Mustache
Official reference: https://github.com/janl/mustache.js
And so on.
For more information about how to use the template engine, see the examples on the official website.

Now we use template and juicer as the demo.
1. Example of Template

<SCRIPT id = "listtemp" type = "text/html"> <% IF (data. length> 0) {%> <div> total <% = total_count %> count </div> <% for (VAR I = 0; I <data. length; I ++) {%> <div> <% = I + 1%>, <a href = "http://www.baidu.com/s? WD = <% = data [I]. user_id %> "> <% = data [I]. user_name %> </a> <div> <% = data [I]. comment_content %> </div> <% IF (data [I]. average_grade> 3) {%> <div> <% = data [I]. average_grade %> </div> <% }%> </div> <%} else {%> <div> no data </div>/ div ><%}%> </SCRIPT>

<SCRIPT type = "text/JavaScript"> var DATA = {total_count: "175", data: [{"user_name": "", "average_grade ": "2.0", "comment_id": "97180", "comment_grade": "1", "comment_content": "Good", "user_id": "8488867", "reply_content ": "", "up_num": "1", "user_avatar": "" },{ "user_name": "Mr. Dafeng Dong", "average_grade": "5.0 ", "comment_id": "97049", "comment_grade": "1", "comment_content": "excellent quality and workmanship, very satisfied! "," User_id ":" 39541412 "," reply_content ":" "," up_num ":" 1 "," user_avatar ":" "}]}; var html = template. render ('listtemp ', data); document. getelementbyid ('content '). innerhtml = HTML; </SCRIPT>

2. Juicer example

<SCRIPT id = "listtemp" type = "text/template" >{@ if !! Data. length} <div> total number of $ {total_count} </div> <Div >{@ each data as OBJ, index} <div> <a href = "http://www.baidu.com/s? WD =$ {obj. user_id} ">$ {obj. user_name} </a> <Div >$ {obj. comment_content} </Div >{@ if obj. average_grade> 3} <Div >$ {obj. average_grade }</Div >{@/if} </Div >{@/each }</Div >{@ else }< div> no data </Div> {@ /If} </SCRIPT>

<SCRIPT type = "text/JavaScript"> var DATA = {total_count: "175", data: [{"user_name": "", "average_grade ": "2.0", "comment_id": "97180", "comment_grade": "1", "comment_content": "Good", "user_id": "8488867", "reply_content ": "", "up_num": "1", "user_avatar": "" },{ "user_name": "Mr. Dafeng Dong", "average_grade": "5.0 ", "comment_id": "97049", "comment_grade": "1", "comment_content": "excellent quality and workmanship, very satisfied! "," User_id ":" 39541412 "," reply_content ":" "," up_num ":" 1 "," user_avatar ":" "}]}; var listhtml = document. getelementbyid ('listtemp '). innerhtml; var html = juicer (listhtml, data); document. getelementbyid ('content '). innerhtml = HTML; </SCRIPT>

 

// Data source var DATA = {total_count: "175", data: [{"user_name": "", "average_grade": "2.0", "comment_id ": "97180", "comment_grade": "1", "comment_content": "Good", "user_id": "8488867", "reply_content": "", "up_num ": "1", "user_avatar": "" },{ "user_name": "Mr. Dafeng Dong", "average_grade": "5.0", "comment_id": "97049 ", "comment_grade": "1", "comment_content": "Quality and workmanship are very good, very satisfied! "," User_id ":" 39541412 "," reply_content ":" "," up_num ":" 1 "," user_avatar ":" "}]};

If you are interested, you can write other JS template engine instances in a reply and talk about the template engine.