首先介绍我们的主角:
下载地址:https://github.com/aui/art-template
模板引擎插件(art-template),它的官方介绍是:拥有接近 JavaScript 渲染极限的的性能.今天我们就用它来渲染我们网页的部分内容.
需要渲染的部分:
这里面的页面结构极其相似,所以我们利用模板可以生成.
接着,我们介绍模板的使用语法:
art-template 支持标准语法与原始语法。标准语法可以让模板易读写，而原始语法拥有强大的逻辑表达能力。
标准语法支持基本模板语法以及基本 JavaScript 表达式；原始语法支持任意 JavaScript 语句，这和 EJS 一样。
输出语法:
//标准语法输出字符串
<td class="text-center">{{@ "已发布" }}</td>
//原始语法输出字符串
<td class="text-center"><%= "已发布" %></td>
//输出字符串时要加双引号,否则会当成变量来解析
分支结构的语法:
//标准语法
{{ if value.status == "published" }}
<td class="text-center">{{@ "已发布" }}</td>
{{ else value.status == "drafted" }}
<td class="text-center">{{@ "草稿" }}</td>
{{ /if }}
//原始语法:
<% if (value.status == "published") { %>
<td class="text-center">{{@ "已发布" }}</td>
<% } else(value.status == "drafted") { %>
<td class="text-center">{{@ "草稿" }}</td>
<% } %>
//原始语法与JS的原生语法很像,只不过多了一对<% %>循环分支:
//标准语法的循环
{{ each list value key }}
<tr>
<td class="text-center"><input type="checkbox" index="{{value.id}}"></td>
<td>{{ value.name }}</td>
<td>{{ value.slug }}</td>
<td class="text-center">
<a href="javascript:void(0);" onclick="editorCategory({{ value.id }})" class="btn btn-info btn-xs">编辑</a>
<a href="javascript:void(0);" onclick="deleteCategory({{ value.id }})" class="btn btn-danger btn-xs">删除</a>
</td>
</tr>
{{ /each }}
//注意标准语法的里面的循环:
//1.如果遍历的是数组value与key代表一个是数组里的元素,一个是下标.
//2.如果遍历的是对象value与key代表一个是对象里的属性值,一个是属性名.
//3.list这个名字可以随便取,也可以叫target,只需要到时候在调用模板的时候,与之对应就可以了.
//原始语法:
<% for(var i =0;i < list.length;i++) { %>
<tr>
<td class="text-center"><input type="checkbox" index="{{value.id}}"></td>
<td>{{ value.name }}</td>
<td>{{ value.slug }}</td>
<td class="text-center">
<a href="javascript:void(0);" onclick="editorCategory({{ value.id }})" class="btn btn-info btn-xs">编辑</a>
<a href="javascript:void(0);" onclick="deleteCategory({{ value.id }})" class="btn btn-danger btn-xs">删除</a>
</td>
</tr>
<% } %>
**//我们发现原始语法与标准语法可以共用,前提是语法书写正确**至于其他的语法,可以去其官网上查阅文档.
模板使用的方法::
第一,导入模板:
<!-- 1.引入模板引擎 -->
<script src="./JS/template-web.js"></script>第二步:准备需要结构类似需要重复生成的模板
<!-- 2.准备模板 -->
<script type="text/html" id="tpl1">
//这里写需要生成的模板
</script>第三步:调用模板的api来渲染模板到页面上
//引用模板,模板生成的内容在变量名ul的内存里面
var ul = template('tpl1',{ list : 6});
//需要我们追加到页面上去
document.getElementById('newBd').innerHTML = ul;
/*
这里需要注意的是,调用api来生成的ul里面包含了需要生成模板里的
所有内容,但是ul作为一个变量,只是将这些值保存在自己的内存里,
并没有被解析出来;所以我们又利用innerHTML可以解析标签的功能将
标签解析出来渲染到页面上
*/ul里面存放的内容(包含标签)
我们可以看到ul里面存放的是一个带有标签的字符串.
模板需要注意的地方:(很重要)
因为模板是在页面上的其他元素加载完成之后,才开始加载的,所以一开始页面上没有模板里面的标签,它是后面用引擎渲染上去的.
所有在操作模板里面的标签元素时,我们应该利用事件的注册或则行内事件的方法.
比如:
{{ each list value key }}
<tr>
<td class="text-center"><input type="checkbox" index="{{value.id}}"></td>
<td>{{ value.name }}</td>
<td>{{ value.slug }}</td>
<td class="text-center">
<a href="javascript:void(0);" onclick="editorCategory({{ value.id }})" class="btn btn-info btn-xs">编辑</a>
<a href="javascript:void(0);" onclick="deleteCategory({{ value.id }})" class="btn btn-danger btn-xs">删除</a>
</td>
</tr>
{{ /each }}冒险岛2具体实现代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./Css/index.css">
<style>
.hot-news a {
position: absolute;
}
</style>
</head>
<body>
<div class="main-area-l">
<div class="news-box">
<div class="news-type-box" id="newsBox">
<div class="news-type-hd clearfix">
<div id="newsHd" class="news-type-a cf">
<a href="javascript:void(0);" class="" target="_blank">全部</a>
<a href="javascript:void(0);" target="_blank" class="">新闻</a>
<a href="javascript:void(0);" target="_blank" class="">公告</a>
<a href="javascript:void(0);" target="_blank" class="">活动</a>
<a href="javascript:void(0);" target="_blank" class="">媒体</a>
<a href="javascript:void(0);" target="_blank" class="">玩家</a>
<a href="javascript:void(0);" target="_blank" class="active">攻略</a>
<span class="tab-arr-line" style="left: 330px;"></span>
</div>
<a href="#" class="more-link" target="_blank">+</a>
</div>
<div class="news-type-bd">
<div id="newBd" class="news-type-cont">
<-- 这里就是模板生成后的内容区域 -->
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<!-- 1.引入模板引擎 -->
<script src="./jquery-1.12.4.js"></script>
<script src="./JS/template-web.js"></script>
<!-- 2.准备模板 -->
<script type="text/html" id="tpl1">
<% for(var i=1;i<=list;i++){ %>
<!-- 默认让第一个显示,其他的都不显示 -->
{{ if i == 1 }}
<!-- 给每一个ul一个点击事件 -->
<ul class="news-list" style="display: block;" id="{{@ "ul" }}{{ i }}">
{{ else }}
<ul class="news-list" style="display: none;" id="{{@ "ul" }}{{ i }}">
{{ /if }}
<li>
<span class="news-icon "></span>
<!-- 为了便于区分这里我们这一个i的输出让内容 -->
<a href="#" target="_blank" class="news-txt">【活动】{{@ "这是第" }}{{@ i }}{{@ "个ul标签" }}</a>
<span class="news-time">08/07</span>
</li>
<li>
<span class="news-icon "></span>
<a href="#" target="_blank" class="news-txt">【活动】暑月蝉鸣礼包限量购 含大量祝福之石机会难得</a>
<span class="news-time">08/07</span>
</li>
<li>
<span class="news-icon "></span>
<a href="#" target="_blank" class="news-txt">【重要】公测版本更新内容及注意事项汇总</a>
<span class="news-time">08/07</span>
</li>
<li>
<span class="news-icon "></span>
<a href="#" target="_blank" class="news-txt">冒险岛2觉醒公测调研问卷-领奖通知</a>
<span class="news-time">08/07</span>
</li>
<li>
<span class="news-icon "></span>
<a href="#" target="_blank" class="news-txt">【活动】冒险家回归计划 欢迎回家！</a>
<span class="news-time">08/07</span>
</li>
<li>
<span class="news-icon "></span>
<a href="#" target="_blank" class="news-txt">【活动】邀请好友一起冒险！</a>
<span class="news-time">08/07</span>
</li>
<li>
<span class="news-icon "></span>
<a href="#" target="_blank" class="news-txt">【活动】七夕岛上大冒险 鹊桥来相会</a>
<span class="news-time">08/07</span>
</li>
</ul>
<% } %>
</script>
<!-- 3.调用api来渲染模板页面 -->
<script>
//引用模板
var ul = template('tpl1',{ list : 6});
document.getElementById('newBd').innerHTML = ul;
//给每个模板顶部的导航点击事件
$("#newsHd a").on('click',function(){
//设置对应的颜色更改
$(this).addClass('active').siblings('a').removeClass('active');
//设置下方对应的span的移动
$('.tab-arr-line').css('left',$(this).position().left + 'px');
//让下方显示的盒子与我的导航栏一致
var idx = $(this).index();
$('.news-list').eq(idx).show().siblings('.news-list').hide();
});
</script>