Out-of-the-template.js based on jquery's template rendering plugin, simple and easy to use

I found several of the jquery-based template rendering plug-ins, no feeling is very difficult to use (less tutorials, binding is not uniform), may also be my IQ problems, such as jquery template.js, Jtemplate.js.

And then find this on GitHub, just like I used to before the company (Apicloud Cloud Development app, a tribute to the "Little Monk" great God package of Hui, simplifying the company a lot of work),

This template rendering is very similar to the Hui, and it is also relatively simple for jquery-based template rendering plugins.

Attach GitHub Https://github.com/yanhaijing/template.js

Characteristics

• Template compilation, rendering
• Supports all major browsers and node (UMD)
• JavaScript native syntax
• A rich set of custom configurations
• Support Data filtering
• Exception capture Feature
• Functional, simple and easy to use

Compatibility

• Node 0.10+
• Safari 6+ (MAC)
• IOS 5+ Safari
• Chrome 23+ (Windows, Mac, Android, IOS, Linux, Chrome OS)
• Firefox 4+ (Windows, Mac, Android, Linux, Firefox OS)
• Internet Explorer 6+ (Windows, Windows Phone)
• Opera + + (Windows, Linux, Android)

Traditional usage (other usage please find on GitHub) https://github.com/yanhaijing/template.js

1. Introduction of jquery files and Template.js

<script src= "Template.js" ></script>

2. Build a template

<script id= "TPL" type= "text/html" ><ul> <!--use if    ---<%if (list.length > 0) {%> < !--use a For loop here, which looks like the JS notation, note the placeholder--><%for (var i = 0; i < list.length; i++) {%><li><%:=list[i]. name%></li><%}%>     <%}else{%>       <li> No data 233333~~~ <li>     <%}%>   <%%></ul></script>

　　

3, template rendering ( template inside the object is what, the transfer of what. {list:[]} to pass an object with a list array )

<script>//First method var TPL = document.getElementById (' TPL '). Innerhtml;var html=template (TPL, {list: [{name: "Yan"}, {Name: "Haijing"}]}); Console.log (HTML);///The second method feels the second use of some TPL = Template (document.getElementById (' TPL '). InnerHTML); html = TPL ({list: []}); Console.log (HTML);</script>

　　

4. Output

<ul><li>yan</li><li>haijing</li></ul><ul><li> No Data 233333~~~< /li></ul>

　　

5. Other usages ( define variables )

<!--it looks almost like JS, it's easy to understand. --><%var test = ' Output custom variable ';%>

　　

The above is so many, welcome to guide the supplement.

For loop, if judgment and JS almost, very comfortable to use.

The use of templates is also to reduce the direct in JS splicing code, simplified development, code readability is very good

Tribute to the developer of this template JS, again put on GitHub https://github.com/yanhaijing/template.js

Out-of-the-template.js based on jquery's template rendering plugin, simple and easy to use