Home > Developer > Web Develop
Arttemplate is a good thing ah, an open source JS front-end template engine, easy to use, rendering efficiency is particularly high.
I often use this technique to dynamically generate news lists, leaderboards, history, etc. that need to be displayed in the front-end list.
Here is the download link for arttemplate:
Https://github.com/aui/artTemplate
Because Arttemplate is relatively simple, easy to use, project examples, documents and more complete, we need to directly refer to the official documents, examples for in-depth understanding,
I'm here for an example that is simple and often used for quick start!
First of all, I am downloading the arttemplate Project src directory under the Template.js
The content is about:
Arttemplate is a new generation of JavaScript template engines that use precompilation to make a qualitative leap in performance and take advantage of JavaScript engine features to make performance extremely good both in front-end and back-end. The rendering efficiency test under Chrome is 25, 32 times times that of the well-known engine mustache and micro Tmpl respectively.
In addition to the performance benefits, debugging features are also worth mentioning. The template debugger can pinpoint the template statements that throw rendering errors, solve the pain of not being debugged during the scripting process, make development more efficient, and avoid situations where a single template error causes the entire application to crash.
The method used is simple, the first step: Write the template, second, render the template.
The method of writing the template is very common stitching, and the velocity of the template writing is quite similar.
var Source = ' <ul> ' + ' <% for (var i = 0; i < list.length; i + +) {%> ' + ' <li> index <%= i + 1%>: <%= list[i]%></li> ' + ' <%}%> ' + ' </ul> ';It is worth noting that the list is the key of the JSON data, not the variable name of the data, if you need to loop, you can write
var data={"list":d atasource;};Methods of rendering
var render = Template.compile (source), var html = render (data);
Where data is the JSON format obtained from the background, the HTML variable can then be inserted into the DOM.
In addition, there are two methods of rendering:
Template.compile ([id], source);//id optional template.render (ID, data);//can also be directly rendered
The ID is the attribute defined in script and the format of data is {Key:value}. The key here is the ID of the template, and the data is in the Value section.
More detailed information can be found in the official documentation.
... Slightly
var template = function (id, content) {
Return template[
typeof content = = = ' object '? ' Render ': ' Compile '
].apply (template, arguments);
};
... Slightly
This is the main use of this function.
The front page content is primarily
<body>
<center> <script id= "Personlistid" type= "text/html";
<font color=" #f00 "size=",
< $for ( var i = 0; i < personlist.length; i++) {$>
Customer name:<$=personlist[i].name$> Customer Age: <$=personlist[i].age$><br/>
</font>
<script type= "Text/javascript" src= "js/ Jquery-1.8.2.js "></SCRIPT>
<script type=" Text/javascript "src=" Js/template.js "> </script>
<script type= "Text/javascript" src= "Js/page/index.js" ></SCRIPT>
</body>
I used the jquery,template, both of which can be downloaded online, placed in the corresponding directory is OK.
The following code uses template technology for a for loop in the form of:
<$$> Internal writable JS code,<$=val$> is the value of the output JS variable val,
Looking at this for loop, there are three points to note:
1) <script></script> must be marked with a unique ID, such as <script id= "Personlistid" ></script>
2) The value of type <script></script> is text/html, not text/javascript
3) personlist This JS variable from where to come, leave a question here first
4) For this list to how to display, you correspond to how to write, here is the simplest to display the customer's name and customer age, and did not bring any pictures, style and so on
Customer Name:<$=personlist[i].name$> customer Age: <$=personlist[i].age$><br/ >.
<script id= "personlist" type= "text/html" >
<font color= "#f00" size= ">"
< $for (var i = 0; i < personlist.length; i++) {$>
Customer Name:<$=personlist[i].name$> customer Age:<$=personlist[i].age$><br/>
<$}$>
</font>
</script>
The next step is to write your own JS code, using template technology, dynamic rendering above the front-end code
The code is written in the Js/page/index.js file, which reads:
$ (function () {
var persons= [
{
Name: "11111111111",
age:1111111111111111
},
{
age:2222222222
",
{
name: "33333333333",
age:333333333333
];//custom JSON format data, the actual application is generally using the AJAX request server to obtain JSON format data, do not know from which version of JS, JS has built-in support for JSON-formatted data
var html = Template (' Personlistid ', {personlist:persons});//Looking at this line of code, are you aware that the aforementioned Personlistid and personlist have been used here and defined
$ (' #templateContent '). HTML ("). HTML (HTML);//jquery usage, The goal is to populate the dynamically generated content (HTML) with the DIV
});
Write Less,do more,i like
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
