模板引擎art-template的介绍

一简介 art-template:

下载地址:https://github.com/aui/art-template

通常所说的渲染分为:

//1. 浏览器端渲染//对应 template-web.js//2.服务器端渲染//对应  npm install art-template --save//对应的express框架         npm install  express-art-template --save

二模板语法:

art-template 支持标准语法与原始语法。标准语法可以让模板易读写，而原始语法拥有强大的逻辑表达能力。标准语法支持基本模板语法以及基本 JavaScript 表达式；原始语法支持任意 JavaScript 语句，这和 EJS 一样。

2.1 输出语法:

// {{@ value }} <%= value %>
//标准语法输出字符串
<td class="text-center">{{@ "已发布" }}</td>//原始语法输出字符串
<td class="text-center"><%= "已发布" %></td>//输出字符串时要加双引号,否则会当成变量来解析

2.2 分支结构的语法:

//标准语法{{ 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的原生语法很像,只不过多了一对<% %>

2.3 循环分支:

//标准语法的循环
{{each target}}{{$index}} {{$value}}
{{/each}}
//$value 与 $index 可以自定义：{{each target val key}}//1. 自定义的例子:
{{ 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"><!-- 这里的onclick就是行内注册事件 --><a href="javascript:void(0);" onclick="editorCategory({{ value.id }})" class="btn btn-info btn-xs">编辑</a><!-- 这里的onclick就是行内注册事件 --><a href="javascript:void(0);" onclick="deleteCategory({{ value.id }})" class="btn btn-danger btn-xs">删除</a></td></tr>{{ /each }}//2. 原始语法与标准语法混用:<% 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>
<% } %>**//我们发现原始语法与标准语法可以共用,前提是语法书写正确**

这里我们重点强调下,循环语句的语法:

{{ each list value key }}......
{{ /each }}// target 支持 array 与 object 的迭代，其默认值为 $data。

2.3.1 循环语法需要注意的点:

//1. list这个名字可以随便取,也可以叫target,只需要在调用模板的时候,与之对应就
可以了.
//2. 如果遍历的是数组value与key代表一个是数组里的元素,一个是下标.
//3. 如果遍历的是对象value与key代表一个是对象里的属性值,一个是属性名.
//4. list实际上时一个数组,但是我们在模板里面传递的时候,需要将这个数组包一下.
包裹为对象.这是因为文档的规定.var HTML = template('id' , { ''list'' : arr }); //将arr包裹一下//5. 如果list是一个对象是一个对象,就不需要包裹,但是传入循环变量里面的list必须是个数组.var HTML = template('id' , obj); //obj无需包裹
但是模板里面的list必须是obj对象里的数组属性//6. 在模板里面,如果传入的就是对象,那么直接可以在模板的html代码里直接使用对应的属性与方法.var HTML = template('id' , obj); //obj无需包裹
//其中的proName,price,oldPrice都是obj对象里面的属性<script id="tpl-product" type="text/html"><div class="product-name">名字:<span>{{ proName }}</span></div><div class="product-price">价格: <span class="new-price">¥{{ price }}</span><del class="old-price">¥{{ oldPrice }}</del></div>
</script>

比如:

上面的对象里有result这个数组属性名,所以调用模板时可以直接这样书写:

var HTML = template('id' , obj); //obj无需包裹//直接将属性名传给模板,模板也会识别这个数组
{{ each result value key }} ......
{{ /each }}

至于其他的语法,可以去其官网上查阅文档.

四客户端模板使用的方法:

4.1 第一,导入模板:

<!-- 1.引入模板引擎 -->
<script src="./JS/template-web.js"></script>

4.2 第二步:准备需要结构类似需要重复生成的模板

<!-- 2.准备模板 -->
<script type="text/html" id="tpl1">//这里写需要生成的模板
</script>

4.3 第三步:调用模板的api来渲染模板到页面上

//引用模板,模板生成的内容在变量名ul的内存里面var ul = template('tpl1',{ list : 6});//需要我们追加到页面上去document.getElementById('newBd').innerHTML = ul;
/*这里需要注意的是,调用api来生成的ul里面包含了需要生成模板里的所有内容,但是ul作为一个变量,只是将这些值保存在自己的内存里,并没有被解析出来;所以我们又利用innerHTML可以解析标签的功能将标签解析出来渲染到页面上
*/

ul里面存放的内容(包含标签)

我们可以看到ul里面存放的是一个带有标签的字符串.

五浏览器端模板需要注意的地方:(最重要)

5.1 因为模板是在页面上的其他元素加载完成之后,才开始加载的,所以一开始页面上没有模板里面的标签,它是后面用引擎渲染上去的.

所有在操作模板里面的标签元素时,我们应该利用 :

 1.行内事件的方法.2.事件的委托3.等待模板渲染完成后才去获取元素

5.1.1 行内事件获取动态添加的元素

 {{ 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"><!-- 这里的onclick就是行内注册事件 --><a href="javascript:void(0);" onclick="editorCategory({{ value.id }})" class="btn btn-info btn-xs">编辑</a><!-- 这里的onclick就是行内注册事件 --><a href="javascript:void(0);" onclick="deleteCategory({{ value.id }})" class="btn btn-danger btn-xs">删除</a></td></tr>{{ /each }}

5.1.2 事件委托获取动态添加的元素

给li的父容器委托一个点击事件,然后由子元素li来触发.这样就可以找到对应的动态添加的子元素.

//以下面的例子举例
<script type="text/html" id="tpl-category-left">{{each rows value index}}<li class="{{@ index == 0 ? 'active' : '';  }}"><a href="#" data-id="{{@ value.id }}">{{@ value.categoryName }}</a></li>{{  /each }}
</script>//给li标签一个点击事件
//利用事件的委托
$('ul').on('tap','li a',function(){//doSomething.......
}

5.2 一个模板里可以有多个渲染对象

这里在模板里面有了两个遍历语法渲染不同的元素,说明,模板里面并不仅仅只能进行一次遍历.

 <!-- 1.模板引擎,轮播图区域 --><script id="tpl-slider" type="text/html"><div class="mui-slider-group mui-slider-loop">{{each pic value index }}{{if index == 0 }}<div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="{{ pic[pic.length-1].picAddr }}" /></a></div>{{ /if }}<div class="mui-slider-item"><a href="#"><img src="{{ value.picAddr }}" /></a></div><!--支持循环，需要重复图片节点-->{{ if index == pic.length - 1 }}<div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="{{ pic[0].picAddr }}" /></a></div>{{ /if }}{{/each}}</div><div class="mui-slider-indicator"><!-- 默认给第一个小圆点选中 小圆点是有几个就是几个 --><!-- 小圆点 -->{{ each pic value key }}<div class="mui-indicator {{ key == 0 ? 'mui-active' : '' }}"></div>{{ /each }}</div></script>

六服务端渲染

服务端的渲染与客户端的差不多,但是还是有区别(以nodeJS为例):

// 1.  导入包  npm install --save art-templatenpm install --save express-art-template// 2.  在html文件使用模板,此时就不需要用script将代码包裹// 3. 在js文件调用模板

6.1 在html文件使用模板

在html文件中,使用模板语法,将需要循环生成的地方包裹在循环语法里面,注意这里与浏览器端渲染的区别,不需要包裹在script标签中.

<tbody><!-- 这里是一个数组 target是一个数组-->{{each target}}<tr><td>{{$index}}</td><td>{{$value.name}}</td><td><a href="javascript:;" onclick="musicPlayer( '{{$value.name}}' )">播放</a></td></tr>{{/each}}</tbody>

6.2 调用语法

//第一步: 导入包
const template = require('art-template');//第一个参数是需要渲染的html文件的路径
//第二个参数是一个对象,传给html文件使用模板循环语法中的target
const html = template(__dirname + '/tpl-user.art', {//这里的target与html中的名字一致user: {name: 'aui'}
});

例子:

//渲染数据var html = template(path.join(__dirname,'../static/html/index.html'), {target : musicData});//设置请求头res.setHeader('Content-Type', 'text/html');res.end(html);

七模板的继承

模板的继承一般用在:有些通用的内容可集中放在一个页面文件中，其它要用到这些内容的页面只需要包含（引用）这个通用文件即可。这样便于维护，如果有很多网页，当通用内容需要修改时，只改一个文件就可以了，不需要每个文件单独修改。

最典型的应用比如页脚的版权信息等内容可以放在一个叫做footer.html文件里，然后其他页面文件在页面内容的最后包含这个文件就可以了

7.1 继承语法:
继承分为两个板块

//1. 被继承的网页,比如:页头,页脚 (父网页)//2. 继承的网页,比如:这个网页只有中间的主体部分,其他需要继承(子网页)

7.1.1 被继承的网页(父网页)

<!--被继承网页,作者建议用art后缀,但是我们一般不用,还是html-->
<!--layout.art-->
<!doctype html>
<html>
<head><meta charset="utf-8"><!--block 表示占位符,头部题目的占位符,表示子网页用实际的内容来替换这里,子网页<title>标签里实际内容--><title>{{block 'title'}}My Site{{/block}}</title><!--block 表示占位符,头部的占位符,表示子网页用实际的内容来替换这里,子网页<link>标签里引入自己对应的样式-->{{block 'head'}}<link rel="stylesheet" href="main.css">{{/block}}
</head>
<body><!--block 表示占位符,body的占位符,表示子网页用实际的内容来替换这里body,注意可以不用替换整个body,放在对应的标签内就可以了-->{{block 'content'}}{{/block}}
</body>
</html>

{{block ‘content’}}{{/block}} 代表的含义是用占位符先把内容位置占据,然后在子网页继承的时候用实际的内容与替换就可以了.

7.1.2 继承的网页(子网页)

<!--继承网页,作者建议用art后缀,但是我们一般不用,还是html-->
<!--index.art--><!--这句话的目的是引入父网页,注意路径,必须能找到父网页-->
{{extend './layout.art'}}<!--替换父网页title的内容-->
{{block 'title'}}{{title}}{{/block}}<!--替换父网页head块的内容-->
{{block 'head'}}<link rel="stylesheet" href="custom.css">
{{/block}}<!--替换父网页body块的内容-->
{{block 'content'}}
<p>This is just an awesome page.</p>
{{/block}}

子网页的作用就是用子网页的实际代码来替换父网页的占位符.相当于父网页只是替你占了位置,但是实际的内容需要子网页来填充.

7.1.3 调用语法渲染

需要被继承的网页模板准备好后,现在我们来调用语法来动态渲染.

// 第一个参数是子页面 parsent.html(需要路径)
// 第二个参数是一个对象需要传输的数据(动态改变子网页的内容的数据)
res.render(path.join(__dirname,'./index.html'), {user: {name: 'aui'}
});

7.2 服务端渲染的例子:

<!--继承自当前目录下的父页面 parsent.html-->
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 占位 --><title>{{block 'title'}}父网页{{/block}}</title>{{block 'head'}}<!-- 占位 --><link href="/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">{{/block}}</head><body><div class="col-md-9"><!-- 中间占位 -->{{block 'content'}}{{/block}}</div></div></div>
</body></html>

<!--这个网页命名为index.html--><!--这句话的目的是引入父网页,注意路径,必须能找到父网页-->
{{extend './parsent.html'}}<!--替换父网页title的内容-->
{{block 'title'}}子网页{{title}}{{/block}}<!--替换父网页head块的内容-->
{{block 'head'}}<link rel="stylesheet" href="head.css">
{{/block}}<!--替换父网页body块的内容-->
{{block 'content'}}<!-- 这里就是动态渲染的数据 --><p>This is my {{ user.name }}.</p>
{{/block}}

// 调用
// 第一个参数是子页面 parsent.html(需要路径)
// 第二个参数是一个对象需要传输的数据(动态改变子网页的内容的数据)
// 注意可以传入多个属性去渲染父页面或则子页面
res.render(path.join(__dirname,'./index.html'), {user: {name: 'aui'}
});

最后浏览端渲染的实例冒险岛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>

完整项目下载地址:
gitHub: https://github.com/Alex-Li2018/maoxiandaoProject

模板引擎art-template的介绍相关推荐

js模板引擎art template数组渲染的方法
转载:js模板引擎art template数组渲染的方法 JavaScript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注,模板引擎种类也是五花八门,我就说几个安全性高.错误处理调 ...
js模板引擎——art Template
简单介绍 javascript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注. artTemplate 是新一代 javascript 模板引擎,它采用预编译方式让性能有了质的飞跃, ...
php yii 模板引擎,模板引擎（Template Engines）
使用模板引擎(Using template engines) 默认情况下,Yii 使用 PHP 作为其默认的模板引擎语言,但是,你可以配置 Yii 以扩展的方式支持其他的渲染引擎, 比如 Twig 或 ...
模板引擎ejs与html,后台模板引擎ejs与前台模板引擎artTemplate的简单介绍
动态网页是指前端页面当中的数据内容来源于后台数据库,前端的html代码会随着后台数据的变化而变化,是动态生成的.制作动态网页有两种方式,一种方式是在后台拿到前端的html模板,利用后台模板引擎(如ej ...
html jquery 模板引擎,jquery template.js前端模板引擎
作为现代应用,ajax的大量使用,使得前端工程师们日常的开发少不了拼装模板,渲染模板在刚有web的时候,前端与后端的交互,非常直白,浏览器端发出URL,后端返回一张拼好了的HTML串.浏览器对其进行 ...
ASP 模板引擎,ASP 模板类 (Taihom.Template.class)
ASP 模板引擎如想获取最新的这个类,可以写邮件给我 '//ASP 模板引擎 (Taihom.Template.class v2.0) '//Code By Taihom '//Taihom 原创 ...
node中使用模板引擎
模板引擎 1 .模板引擎基础 1.1模板引擎主要功能就是拼接字符串(将HTML模板与数据拼接) 模板引擎不是node.js本身提供的,是第三方模块让开发者以更友好的方式拼接字符串,是项目代码更加清 ...
模板引擎artTemplate
模板引擎artTemplate 1. 基础概念 1.1 模板引擎★★★ 模板引擎(这里特指用于Web开发的模板引擎)是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,用于网站的 ...
velocity模板引擎帮助
Velocity用户手册是帮助页面设计者和内容提供者认识Velocity和其简单而功能强大的脚本语言――Velocity模板语言(VTL).在手册上的许多例子,都是用Velocity插入动态的内容到网 ...
学生档案信息管理之模板引擎的应用
实现学生信息添加功能在模板的表单中指定请求地址与请求方式为每一个表单项添加name属性添加实现学生信息功能路由接收客户端传递过来的学生信息将学生信息添加到数据库中将页面重定向到 ...

模板引擎art-template的介绍

模板引擎art-template的介绍相关推荐

最新文章

热门文章