javascript模板引擎——artTemplate

地址: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>

<!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>

更多请见官网...

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值