Home > Developer > JavaScript
I have a project in hand to meet a problem: The original project developers in JavaScript, a lot of stitching HTML, resulting in the code is extremely ugly, extremely difficult to maintain. How can they put up with such ugly, clumsy code, or perhaps they have a very strong tolerance, and don't want to find a solution at all.
However, I, is never agree cannot accept this kind of ugly way of solution. There is no elegant solution, so on the Internet to search for dot.js.
The homepage is very concise, on a page, study a bit, on the smooth start, quite simple to use. The main step is two steps away.
1. Write a template
Write the template, you use the official documents provided to you kick, of course, a total of more than three:
{{}} for evaluation template tag {{=}} for interpolation output display, default variable named it{{!}} With encoding encoded output display {{#}} For compile-time evaluation/includes and partials output shows pre-defined (not yet used) {{# # #}} for conditionals Conditional branch, forarray Iteration traversal array The above in accordance with their own understanding, simple translation mark the general meaning, also do not know right O (∩_∩) o~
The main use is three, {{=}} variable output, {{?}} The conditional branch, and {{~}}, iterate through the array.
2, call the template, generate the final HTML, put the HTML in the corresponding place to be able to
Call the template, this is nothing to say, copy the official code over the line, the following is a complete code.
1<!DOCTYPE html> 2<Html> 3<Head> 4<Title>test</Title> 5</Head> 6<Body> 7<H1>this is Dot.js test.</H1> 8 9<UlId="List" >10<!--Below is the template, general recommendation written in <ScriptId="Test_tmpl"Type="Text/x-dot-template" >{{? it && it.length >0}}{{~ It:value}}<li>Name:<Ahref="Javascript:click_me ({{! Json.stringify (Value)}}) ">{{=value.name}}</A>16 17 Age: {{=value.age}}18</li>19 {{~}}20 {{}}} 21st</Script>22</UL>23 24<ScriptSrc="Js/jquery-1.11.2.min.js" ></Script>25<ScriptSrc="Js/dot.min.js" ></Script>26</Body>27 28<ScriptType="Text/javascript" >29 $ (function () {30var data = [{Name:‘Bananaplan ', Age:31},{Name:‘Wangxiaozhu ', Age:18}33];3435var TEMPFN = dot.template ($ (‘ #test_tmpl '). html ()); 36 var resulttext = TEMPFN (data); 38 Console.log (resulttext); 40 $ ( ' #list '). HTML (resulttext); 42 43 function click_me (value) {44 console.log (value); 45 alert (json.stringify (value)); 46} 47 </script>48 49 </HTML>
The code is not difficult, write the template first, then call the template, generate the final desired HTML snippet, and finally put it under the corresponding DOM node.
But in this seemingly simple process, I met and solved a problem.
Please note that the 15th line, it is not so written, but this:
<href="Javascript:click_me ({{=value}})" >{{=value.name}}</a> I mean, want to pass the whole object to the Click_me function, but so write an error, and then think that it can pass the JSON string past, and then in the function to parse a bit, and then changed to the following:
<href="Javascript:click_me ({{=json.stringify (value)}})" >{{=value.name}}</ a> The result is still an error. Note that in the above code, I'm using {{=}} instead of {{!}}. Because there is no code such as quotation marks, so will error, finally, I changed to the following this final version, OK:
<href="Javascript:click_me ({{! Json.stringify (Value)}}) ">{{=value.name}}</a> So, if you want to pass an object, you need to convert the JSON object to a string and then encode it.
So, solve my big problem, do not have to painstakingly stitching HTML, and in the process of using dot.js, there is no obstacle.
Online about dot.js information is not much, if, the people see here, hope this text to you helpful.
dot.js--front-end JavaScript template engine Issue Memo
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
