Home > Developer > JavaScript
Sometimes we don't need a very powerful JavaScript template engine (such as jquery Tmpl or HANDLEBARSJS), we just need to bind some very simple fields in a simple template, this article will use very simple techniques to help you achieve this small function.
First we define the template we need, in the script block with the ID template:
<!doctype html>Then we need to get the data we need through Ajax and other ways, and here we use our own defined arrays for ease of display:
var data = [{title: "Knockout Application Development Guide", href: "http://jcodecraeer.com/a/jquery_js_ajaxjishu/2012/0627/281.html", imgsrc : "Http://www.jcodecraeer.com"},{title: "Microsoft ASP. NET Site Deployment Guide", href: "http://jcodecraeer.com/a/jquery_js_ajaxjishu/ 2012/0627/281.html ", imgsrc:" http://www.jcodecraeer.com "},{title:" HTML5 Learning Notes Concise Edition ", href:" http://jcodecraeer.com/a/ Jquery_js_ajaxjishu/2012/0627/281.html ", imgsrc:" Http://www.jcodecraeer.com "}],We have 2 ways to bind this data to the template, the first is a very simple hardcode method, and the second is to automatically identify the variable type.
Let's first look at the first way, by replacing the value in the curly braces with the value in data to achieve the goal:
Template = Document.queryselector (' #template '). Innerhtml,result = Document.queryselector ('. Result '), i = 0, Len = Data.length,fragment = "; for (; i < Len; i++) { fragment + = Template . replace (/\{\{title\}\}/, Data[i].title) . Replace (/\{\{hre f\}\}/, Data[i].href) . Replace (/\{\{imgsrc\}\}/, DATA[I].IMGSRC);} result.innerhtml = fragment;The second approach is more flexible, replacing all curly braces with regular expressions instead of a replacement, which is relatively flexible, but be aware of the fact that the template label may not exist in the data:
This allows us to define our own labels and item attributes without having to modify the JS code.Template = Document.queryselector (' #template '). Innerhtml,result = Document.queryselector ('. Result '), Attachtemplatetodata; Using the template and data as parameters, the values are replaced by all the items in the data on the label of the template (note that it is not possible to traverse the template label because the label may not exist in the data). Attachtemplatetodata = function (template, data) { var i = 0, len = data.length, fragment = '; Iterate through each item in the data set, making the corresponding replacement function replace (obj) { var t, key, Reg; Iterate through all the properties under the data item, look for the label as the key value, and then replace the for (key in obj) { reg = new RegExp (' {{' + ' + '} '} ', ' IG '); t = (T | | template). replace (Reg, Obj[key]); } return t; } for (; i < Len; i++) { fragment + = replace (Data[i]); } return fragment; }; result.innerhtml = Attachtemplatetodata (template, data);
http://taourl.com/fcw1kBuild your own JavaScript template small engine
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
