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

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

一.引用js

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

<script src="../dist/template.js"></script>

二.基本使用方法

1.第一种使用方法

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>template基本使用</title>
<script src="../dist/template.js"></script>
</head>
<body><div id="content"></div><script id="test" type="text/html">//{{if}}{{/if}}用来判断 {{each}}{{/each}}循环
{{if isAdmin}}
<h1>{{title}}</h1>
<ul>{{each list as value i}}<li>索引 {{i + 1}} ：{{value}}</li>{{/each}}
</ul>
{{/if}}</script><script>
var data = {title: 'template基本使用例子',isAdmin: true,list: ['博客', '学院', '下载', '图文课', '论坛', 'APP', '问答','商城']
};
var thtml = template('test', data);
document.getElementById('content').innerHTML = html;
//或者   $('#content').empty().append(thtml).show();
</script>
</body>
</html>

效果：

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

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

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

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

{{if isAdmin}}
<h1>{{title}}</h1>
<ul>{{each list as value i}}<li> 索引 {{i + 1}} ：{{value}}</li>{{/each}}
</ul>
{{/if}}

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

<script>
var obj = {title: '模板页获取例子',isAdmin: true,list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};//var listData = obj.list;
var thtml = $.get('template/listTemplate.html',function(data) {var render = template.compile(data);//$('#content').empty().append(render(listData));$('#content').empty().append(render(obj));
});//或者
//var thtml = $.get('template/listTemplate.html',function (data) {//  var render = template.compile(data);//  var str = render(obj);//  document.getElementById('content').innerHTML = str;
//})；
</script>

2.4 模板中内嵌模板

 <li><button class="btn-contribution"type="{{$value.type}}"anchor_id="{{$value.pfid}}"><span class="btn-title">貢獻榜</span><span class="top-user-groups">{{include 'top3Template' $value.top3}}</span></button></li>//top3Template模板直接写在主html里面
<!--top3子模板-->
{{each}}
<span class="top-user top-{{$index+1}}"><img src="{{$value.headimg}}" pfid="{{$value.pfid}}" alt="">
</span>
{{/each}}

总结：

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

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

JavaScript模板引擎Template.js基本使用详解相关推荐

JavaScript模板引擎Template.js使用详解
这篇文章主要为大家详细介绍了JavaScript模板引擎Template.js使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 template.js 一款 JavaScript 模板引擎, ...
JavaScript模板引擎Template.js使用
文章主要为大家详细介绍了JavaScript模板引擎Template.js使用方法.template.js 一款 JavaScript 模板引擎,简单,好用.提供一套模板语法,用户可以写一个模板区块, ...
JavaScript模板引擎Template.js
template.js 一款 JavaScript 模板引擎,简单,好用.提供一套模板语法,用户可以写一个模板区块,每次根据传入的数据,生成对应数据产生的HTML片段,渲染不同的效果.https:// ...
高性能JavaScript模板引擎template.js原理解析
点击有惊喜 artTemplate是新一代javascript模板引擎,它在v8中的渲染效率可接近javascript性能极限,在chrome下渲染效率测试中分别是知名引擎Mustache与micro ...
js模板引擎Template.js使用详解及免费下载template.js
这篇文章主要为大家详细介绍了JavaScript模板引擎Template.js使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 template.js 一款 JavaScript 模板引擎, ...
Javascript模板引擎mustache.js详解
进阶之路在于日积月累, 每天进步一点点-加油~ mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后只有9KB,非常值得在项目中使用. ...
php模板引擎循环start,smarty模板引擎foreach和section循环操作详解
php smarty模板引擎是目前最著名的PHP模板引擎之一,它分离了逻辑代码和外在的内容,提供了一种易于管理和使用的方法,使得PHP程序员和前端人员分离:smarty 里有两种数据循环的方式,分别是 ...
JavaScript模板引擎详解
JavaScript模板引擎是一种用于生成HTML.XML和其他文本格式的工具,它将特定的模板语法转换为相应的文本输出,通常用于前端开发中动态生成页面内容.下面是一个JavaScript模板引擎的详细 ...
【JavsScript】推荐五款流行的JavaScript模板引擎
摘要:Javascript模板引擎作为数据与界面分离工作中最重要一环,受到开发者广泛关注.本文通过开发实例解析五款流行模板引擎:Mustache.Underscore Templates.Embedd ...

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

JavaScript模板引擎Template.js基本使用详解相关推荐

最新文章

热门文章