js模板引擎-art-template常用总结(转)
原文:https://www.cnblogs.com/shiyou00/p/6841801.html
art-template
javascript 模板引擎,官网:https://github.com/aui/art-template
分为原生语法和简洁语法,本文主要是讲简洁语法
- 基础数据渲染
- 输出HTML
- 流程控制
- 遍历
- 调用自定义函数方法
- 子模板引入
基础数据渲染
一、引入art-template.js文件
<script src="template-debug.js"></script>
二、编写HTML模板
<script id="test" type="text/html">
<h1>{{title}}</h1>
</script>
三、向模板插入数据,并输出到页面
var data = {
title:"hello world"
};
var html = template("test",data);
document.getElementById('content').innerHTML = html;
输出HTML
<script id="test" type="text/html">
<h1>{{title}}</h1>
</script>
//注意:{{title}}这是对内容编码输出,应该写成{{#title}}这是对内容不编码输出
<script id="test" type="text/html">
<h1>{{#title}}</h1>
</script>
var data = {
title:"<p>hello world</p>"
};
var html = template("test",data);
document.getElementById('content').innerHTML = html;
流程控制语句(if else)
{{if value}}
...
{{else if value}}
...
{{else}}
...
{{/if}}
art-template里面的流程控制就相对其他模板来说强大很多了,直接看例子吧
<script id="test" type="text/html">
<div>
{{if bok==22}}
<h1>线上</h1>
{{else if bok==33}}
<h2>隐藏</h2>
{{else}}
<h3>走这里</h3>
{{/if}}
</div>
</script>
<script>
var data = {
"bok":22
};
var html = template('test',data);
document.getElementById("app").innerHTML = html;
</script>
嵌套的写法
<script id="test" type="text/html">
<div>
{{if bok}}
{{if list.length>=0}}
{{each list}}
<p>{{$index}}:{{$value}}</p>
{{/each}}
{{else}}
<p>没有数据</p>
{{/if}}
{{/if}}
</div>
</script>
<script>
var data = {
"bok":true,
list:["a","b","c"]
};
var html = template('test',data);
document.getElementById("app").innerHTML = html;
</script>
循环遍历语句
{{each name}}
索引:{{$index}}
值:{{$value}}
{{/each}}
<script id="test" type="text/html">
<div>
<ul>
{{if c==100}}
<ul>
{{each person}}
<li>
编号:{{$index+1}}--姓名:{{$value.name}}--年龄:{{$value.age}}
</li>
{{/each}}
</ul>
{{/if}}
</ul>
</div>
</script>
<script>
var data = {
c:100,
person:[
{name:"jack",age:18},
{name:"tom",age:19},
{name:"jerry",age:20},
{name:"kid",age:21},
{name:"jade",age:22}
]
};
var html = template("test",data);
document.getElementById("content").innerHTML = html;
</script>
调用自定义方法
通过template.helper(name,fnCallBack)注册方法
可以直接在{{}}中调用
<script id="test" type="text/html">
<div>
{{if c==100}}
<ul>
{{each person}}
<li>姓名:{{$value.name}}--性别:{{show($value.sex)}}</li>
{{/each}}
</ul>
{{/if}}
</div>
</script>
<script>
var data = {
c:100,
person:[
{name:"jack",age:18,sex:1},
{name:"tom",age:19,sex:0},
{name:"jerry",age:20,sex:0},
{name:"kid",age:21,sex:1},
{name:"jade",age:22,sex:0}
]
};
//自定义函数
template.helper("show",function(sex){
console.log(sex);//同样可以打印日志到控制台
if(sex==0){
return "男"
}else if(sex==1){
return "女"
}
});
var html = template("test",data);
document.getElementById("app").innerHTML = html;
</script>
调用子模板
{{include 'main'}} 引入子模板,数据默认为共享
{{include 'main' a}} a为制定数据,但是同样必须是父级数据,可以看看下面的例子,如果不注入的a的话,引入的子模板是接受不到数据的
<body>
<div id="app"></div>
<script src="template-debug.js"></script>
<script id="main" type="text/html">
<ul>
{{each list}}
<li>{{$value}}</li>
{{/each}}
</ul>
</script>
<script id="test" type="text/html">
<div>
<ul>
{{each person}}
<li>{{$value.name}}</li>
{{/each}}
</ul>
{{include 'main' a}}
</div>
</script>
<script>
var data = {
person:[
{name:"jack",age:18},
{name:"tom",age:19},
{name:"jerry",age:20},
{name:"kid",age:21},
{name:"jade",age:22}
],
a:{
list:['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
}
};
var html = template("test",data);
document.getElementById("app").innerHTML=html;
</script>
</body>
如有笔误,请留言指出,共同进步!
js模板引擎-art-template常用总结(转)的更多相关文章
- js 模板引擎 -Art Template
一个例子涵盖所有: <!doctype html> <html> <head> <meta charset="UTF-8"> < ...
- doT js 模板引擎【初探】要优雅不要污
js中拼接html,总是感觉不够优雅,本着要优雅不要污,决定尝试js模板引擎. JavaScript 模板引擎 JavaScript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注. ...
- JS 模板引擎 BaiduTemplate 和 ArtTemplate 对比及应用
最近做项目用了JS模板引擎渲染HTML,JS模板引擎是在去年做项目是了解到的,但一直没有用,只停留在了解层面,直到这次做项目才用到,JS模板引擎用了两个 BaiduTemplate 和 ArtTemp ...
- js模板引擎
js模板引擎包括如下: template 官方参考:http://aui.github.io/artTemplate BaiduTemplate 官方参考:http://baidufe.github. ...
- 调研js模板引擎
js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTe ...
- js模板引擎介绍搜集
js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTe ...
- Filter - Surge.js模板引擎过滤器
版权所有,转载请注明出处:http://guangboo.org/2014/01/05/filter-surgejs-template-engine 过滤器在surge.js模板引擎中多处用到,其类似 ...
- js模板引擎--artTemplate
js模板引擎--artTemplate 以前研究过一段时间的handlebars,但因为其渲染性能略逊于腾讯的artTemplate(在artTemplate的GitHub官网上有推荐的性能测试地址) ...
- JS模板引擎:tppl
全球最快的JS模板引擎:tppl 废话不多说,先上测试: 亲测请访问:[在线测试地址]单次结果不一定准确,请多测几次. tppl 的编译渲染速度是著名的 jQuery 作者 John Resig 开发 ...
- 百度JS模板引擎 baiduTemplate 1.0.6 版
A.baiduTemplate 简介 0.baiduTemplate希望创造一个用户觉得“简单好用”的JS模板引擎 注:等不及可以直接点左侧导航中的”C.使用举例“,demo即刻试用. 1.应用场景: ...
随机推荐
- synchronized和volatile的区别
但是volatile不适合做计数器使用,即使他具有可见性,但是它不具有原子性.不能保证数据的一致性. 但是volatile适合哪种场景呢? 比较适合做一些标示.比如说两个线程,线程B必须得等线程A执行 ...
- Ubuntu 18.04 设置开机启动脚本 rc.local systemd
ubuntu18.04不再使用initd管理系统,改用systemd. ubuntu-18.04不能像ubuntu14一样通过编辑rc.local来设置开机启动脚本,通过下列简单设置后,可以使rc.l ...
- HDU 1036(平均速度 **)
题意是求出跑了 n 圈每圈 m km 的个人的平均速度. 控制格式,特别注意,题意是输出 -:--:-- 的该人成绩作废,但要把他其他的成绩输进去,不能直接就 break ,输出也就只有一个 - ,而 ...
- C#下RSA算法的实现(适用于支付宝和易宝支付)
RSA算法代码: using System; using System.Collections.Generic; using System.Text; using System.IO; using S ...
- Tornado基本应用
Tornado简介 Tornado有自己的socket(异步非阻塞,原生支持WebSocket),Django没有. Tornado的模板语言更接近Python风格,比Django要好理解. Demo ...
- 几本不错的数据仓库和Hadoop书籍
<<Pentaho Kettle解决方案:使用PDI构建开源ETL解决方案>>, Matt Casters等著,初建军翻译<<Hadoop应用架构>> ...
- VS下个人认为比较实用的插件
懒得打字了,直接贴图
- DataReader分页性能测试
参考程序地址:http://www.cnblogs.com/eaglet/archive/2008/10/09/1306806.html 最近遇见程序慢的问题,使用的DataReader,猜想是分页导 ...
- C# RestoreDirectory
OpenFileDialog与SaveFileDialog都有RestoreDirectory属性,这个属性默认是false,打开一 个文件后,那么系统默认目录就会指向刚才打开的文件.如果设为true ...
- 使用phpexcel上传下载excel文件
1. 下载 <?php /** * Created by lonm.shi. * Date: 2012-02-09 * Time: 下午4:54 * To change this templat ...