JavaScript模板引擎Template.js基本使用详解

template.js是一款JavaScript模板引擎，提供一套模板语法，简单好用，开发者可以写一个模板区块，每次传入的数据，生成对应数据产生的HTML片段，渲染不同的效果。官网：简洁语法版 https://github.com/aui/art-template/wiki/syntax:simple

一.引用js

下载artTemplate后，找到template.js引入到页面。

二.基本使用方法

1.第一种使用方法

效果：

template基本使用例子

• 索引1 ：博客
• 索引2 ：学院
• 索引3 ：下载
• 索引4 ：图文课
• 索引5 ：论坛
• 索引6 ：APP
• 索引7 ：问答
• 索引8 ：商城

 

2.第二种使用方法（引用模板）

2.1 在项目文件夹中新建template文件夹，把所需要的各种模板单独放入对应的html里面

2.2 模板页代码（2.1中listTemplate.html）

{{if isAdmin}} 
{{title}}

    {{each list as value i}}
        
 索引 {{i + 1}} ：{{value}}
    {{/each}}
 
{{/if}}

2.3  使用ajax中的get方法对html进行模板替换

2.4 模板中内嵌模板

 

    
        貢獻榜
        
              {{include 'top3Template' $value.top3}}
        
     
  

//top3Template模板直接写在主html里面

{{each}}

      

{{/each}}

总结：

先使用jquery的get方法获取模板页，然后再利用template.compile()获取渲染内容，然后将数据obj渲染进去，最后添加到页面里即可。

注意：这时候就不能使用template()方法进行模板替换了，必须使用template.compile()及render()进行模板替换才行。