Home > Developer > Web Develop
Dot.js is a template framework that is used on the Web front end.
DoT.min.js is a compressed version of Dot.js.
Simple Demo Code:
HTML, JavaScript code at a glance:
The effect of running in the browser:
Dot.js as a template engine,
The main purpose is to put the data into the written template and generate the HTML code that contains the data.
This is a very simple web front-end template framework,
Simply say a few things and you'll use them!
1, in the template, it this variable, is passed in the data object, should be the English items;
2, the Dot.template (template) (obj) code interpretation: To use templates as parameters into the Dot.template () method, DoT will handle the template, and then you pass the data object, return value, is HTML and the data generated HTML code, and then splicing to the page;
3, in the template, {{}} The contents of the package, is the JavaScript code, DOT will be responsible for processing, because this is a strange way of writing, the Novice generally appear the template is wrong, carefully troubleshooting.
Source code in the demo:
<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Untitled Document </title>
<body >
<ul id= ' Showinfo ' >
<script type= "Text/template" charset= "Utf-8" id= ' template_1 ' >
{{if (it && it.length>0) {}}
{{for (var i=0; i<it.length; i++) {}}
<li>{{=it[i].name}}</li>
{{ } }}
{{}else{}}
<li> no data. </li>
{{ } }}
</script>
</ul>
<br>
<br>
<ul id= ' ShowInfo2 ' >
</ul>
</body>
<script type= "Text/javascript" charset= "Utf-8" src= ' doT.min.js ' ></script>
<script type= "Text/javascript" charset= "Utf-8" >
var Template=document.getelementbyid (' Template_1 '). InnerHTML;
var obj=[{name: ' D1 '},{name: ' D2 '},{name: ' D3 '}];
Pass in an array with data.
document.getElementById (' Showinfo '). Innerhtml=dot.template (template) (obj);
The incoming data is empty
document.getElementById (' ShowInfo2 '). Innerhtml=dot.template (template) ([]);
</script>
Dot.js-js template engine use, tutorials, Getting Started
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
