js模板引擎art-template用法
时间:2019-02-19
本文章向大家介绍js模板引擎art-template用法,主要包括js模板引擎art-template用法使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
art-template
javascript 模板引擎,官网:https://github.com/aui/art-template
分为原生语法和简洁语法,本文主要是讲简洁语法
- 基础数据渲染
- 输出HTML
- 流程控制
- 遍历
- 调用自定义函数方法
- 子模板引入
基础数据渲染
一、引入art-template.js文件
<script src=''></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}}
<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>
调用自定义方法
$.get("https://share.nf.com/api/data/student/v1/summary/list/share/topic/id/" + params, function (res) {
if (res.code === 200&& res.data) {
}
template.defaults.imports.formatDay = function(timestamp){
var date = new Date(timestamp);
const year = date.getFullYear();
const month = date.getMonth() + 1;
const day = date.getDate();
return year + '.' + (String(month).length > 1 ? month : '0' + month) + '.' + (String(day).length > 1 ? day : '0' + day)
}
var html = template("test", data);
document.getElementById("content").innerHTML = html;
})
使用
<span class="date-time">{{formatDay($value.updatedTime)}}</span>
v
调用子模板
{{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>
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法