ArtTemplate_List 实例 - 刘新修 - 刘新修的个人博客 (Liuxinxiu'S Blog)

JS 格式化日期

JS把数组类型转换为JS

ArtTemplate_List 实例

大 | 中 | 小

[

2016/08/02 16:56 | by 刘新修 ]

ArtTemplate_List 实例1

XML/HTML代码

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>basic-demo</title>
<script src="../dist/template.js"></script>
</head>
<body>
<div id="content"></div>
<script id="test" type="text/html">
{{if isAdmin}}
<h1>{{title}}</h1>
<ul>
{{each list as value i}}
<li>索引 {{i + 1}} ：{{value}}</li>
{{/each}}
</ul>
{{/if}}
</script>
<script>
var data = {
title: '基本例子',
isAdmin: true,
list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;
</script>
</body>
</html

ArtTemplate_List 实例2

XML/HTML代码

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>compile-demo</title>
<script src="../dist/template.js"></script>
</head>
<body>
<h1>在javascript中存放模板</h1>
<div id="content"></div>
<script>
var source = '<ul>'
+ '{{each list as value i}}'
+ '<li>索引 {{i + 1}} ：{{value}}</li>'
+ '{{/each}}'
+ '</ul>';
var render = template.compile(source);
var html = render({
list: ['摄影', '电影', '民谣', '旅行', '吉他']
});
document.getElementById('content').innerHTML = html;
</script>
</body>
</html>

XML/HTML代码

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>basic-demo</title>
<script src="../dist/template.js"></script>
</head>
<body>
<h1>在javascript中存放模板</h1>
<div id="content"></div>
<script>
/***** 小模版 *****/
var source=''
+'<ul>'
+ '{{each list as value i}}'
+ '<li>索引 {{i+1}} ：{{value}}</li>'
+ '{{/each}}'
+'</ul>';
/***** 定义变关联逻辑代码片段（小模版） *****/
var connectJs=template.compile(source);
/***** 最终的数据源等于==逻辑代码关联数据 *****/
var htmlData=connectJs({
list: ['摄影', '电影', '民谣', '旅行', '吉他']
});
/***** 把最终处理后的数据源插入到页面 *****/
document.getElementById('content').innerHTML=htmlData;
</script>
</body>
</html>

实例访问地址：http://code.liuxinxiu.com/jstpl/artTemplate/demo/best.html

include嵌入子模板:

XML/HTML代码

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>include-demo</title>
<script src="../dist/template.js"></script>
</head>
<body>
<div id="content"></div>
<script id="test" type="text/html">
<h1>{{title}}</h1>
{{include 'list'}}
</script>
<script id="list" type="text/html">
<ul>
{{each list as value i}}
<li>索引 {{i + 1}} ：{{value}}</li>
{{/each}}
</ul>
</script>
<script>
var data = {
title: '嵌入子模板',
list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;
</script>
</body>
</html>

理解部分（使用普通for循环加声明语法，进行数组遍历）1：

XML/HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AtrTemplate</title>
</head>
<body>
<div id="content"></div>
<script src="js/template-native.js"></script>
<script id="test" type="text/html">
<%for( i = 0; i < content.length; i++) {%>
<h1><%=content[i].title%></h1>
<p>条目内容 : <%=content[i].list%></p>
<%}%>
// 等同于普通的for循环，在普通的for循环上给每一行语法声明加上<% xx %>
// 等同于普通的for循环，在普通的for循环上取值部分加上类似jsp的变量声明 <%= xx %>
//for(i=0;i<content.length;i++){
// <h1><%=content[i].title%></h1>
// <p>条目内容 : <%=content[i].list%></p>
//}
</script>
<script>
/***** 自造数据，content为数组List便于测试循环 *****/
var data={
content:[
{
title: "artTemplate",
list: "新一代 javascript 模板引擎",
},
{
title: "特性",
list: "性能卓越，执行速度快"
}
]
};
/***** 用template映射数据到逻辑代码区域|也可以理解称给逻辑代码片段绑定数据源 *****/
var html=template('test',data);
/***** 选择页面Dom元素，插入处理后的数据 *****/
document.getElementById("content").innerHTML=html;
</script>
</body>
</html>

理解部分（使用普通for循环加声明语法，进行双层嵌套数组遍历）2：

XML/HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AtrTemplate -- 简介</title>
</head>
<body>
<div id="content"></div>
<script src="js/template-native.js"></script>
<script id="listtemp">
</script>
<script id="test" type="text/html">
//循环嵌套，循环数组里的数组
<%for(i=0;i<content.length;i++){%>
<h1><%=content[i].title%></h1>
<ul>
<%for(j=0;j<content[i].list.length;j++){%>
<li><%=content[i].list[j]%></li>
<%}%>
</ul>
<%}%>
</script>
<script>
var data={
content:[
{
title: "artTemplate",
list:["新一代 javascript 模板引擎"]
},
{
title: "特性",
list: [
"性能卓越，执行速度通常是 Mustache 与 tmpl 的 20 多倍",
"支持运行时调试，可精确定位异常模板所在语句",
" 对 NodeJS Express 友好支持",
"安全，默认对输出进行转义、在沙箱中运行编译后的代码（Node版本可以安全执行用户上传的模板）",
" 支持include语句",
"可在浏览器端实现按路径加载模板",
"支持预编译，可将模板转换成为非常精简的 js 文件",
"模板语句简洁，无需前缀引用数据，有简洁版本与原生语法版本可选",
"支持所有流行的浏览器"
]
}
]
};
/***** 用template映射数据到逻辑代码区域|也可以理解称给逻辑代码片段绑定数据源 *****/
var html=template('test',data);
/***** 选择页面Dom元素，插入处理后的数据 *****/
document.getElementById("content").innerHTML=html;
</script>
</body>
</html>

H5/JS/CSS | 评论(0) | 引用(0) | 阅读(3716)