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()进行模板替换才行。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值