您的位置：首页 > Web前端 > JavaScript

javascript模板引擎——artTemplate

2015-12-04 10:42 656 查看
地址：https://github.com/aui/artTemplate

https://github.com/aui/artTemplate/wiki/%E8%87%AA%E5%AE%9A%E4%B9%89%E8%AF%AD%E6%B3%95%E6%89%A9%E5%B1%95%E8%AF%B4%E6%98%8E


编写模板

使用一个
type="text/html"
的
script
标签存放模板：
<script id="test" type="text/html">
<h1><%=title%></h1>
<ul>
<%for(i = 0; i < list.length; i ++) {%>
<li>条目内容 <%=i + 1%> ：<%=list[i]%></li>
<%}%>
</ul>
</script>


模板逻辑语法开始与结束的界定符号为
<%
与
%>
，若
<%
后面紧跟
=
号则输出变量内容。


渲染模板

template.render(id,
data)

var data = {
title: '标签',
list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
var html = template.render('test', data);
document.getElementById('content').innerHTML = html;


嵌入子模板

<%include(id,
[data])%>
语句可以嵌入子模板，其中第二个参数是可选的，它默认传入当前的数据。
<script id="test" type="text/html">
<h1><%=title%></h1>
<%include('list')%>
</script>

<script id="list" type="text/html">
<ul>
<%for(i = 0; i < list.length; i ++) {%>
<li>条目内容 <%=i + 1%> ：<%=list[i]%></li>
<%}%>
</ul>
</script>


[html] view
plaincopy





<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<title>include demo</title>

<script src="template.js"></script>

</head>

<body>

<div id="content"></div>

<div id="tagcontent"></div>

<script id="targettemplate" type="text/html">

<h1><%=title%></h1>

<%include('list')%>

<%include('Tvalue')%>

</script>

<script id="list" type="text/html">

<ul>

<%for(var i=0; i<listItems.length; i++){%>

<li>条目内容<%=i+1%> : <%=listItems[i]%></li>

<%}%>

</ul>

</script>

<script id="Tvalue" type="text/html">

<p>不转义:<%==trans%> or <%=#trans%></p>

<p>默认转义: <%=trans%></p>

</script>

<script>

var data = {

title: '嵌入子模板',

listItems: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他'],

trans:'<label style="color:#F00; font-weight:bold;">hello world!</label>'

};

var logintsorse='<h3>template.compile([id], source)将返回一个渲染函数。其中 id 参数是可选的，'

+'如果使用了 id 参数，可以使用template.render(id, data)渲染模板。</h3>'

+'使用arttemplate来编写：<%=title%>';

var html = template.render('targettemplate', data);

var render = template.compile(logintsorse);

var compilehtml = render(data);

document.getElementById('content').innerHTML = html+compilehtml;

</script>

<script id="customTag" type="text/html">

<h1><!--[= header]--></h1>

<ul>

<!--[for(var i=0; i<tag.length; i++){]-->

<li>条目内容<!--[=i+1]--> : <!--[=tag[i]]--></li>

<!--[}]-->

</ul>

</script>

<script>

template.openTag = '<!--[';

template.closeTag = ']-->';

var listdata = {

header : 'your study list',

tag : ['算法导论','linq','c#','jquery','django','python']

};

var resulthtml = template.render ('customTag', listdata);

document.getElementById('tagcontent').innerHTML = resulthtml;

//

</script>

</body>

</html>



更多请见官网...
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航