Build your own JavaScript template small engine

Source: Internet
Author: User

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:

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);
This allows us to define our own labels and item attributes without having to modify the JS code.
http://taourl.com/fcw1k

Build your own JavaScript template small engine

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.