atitit.jquery tmpl模板总结 .doc

atitit.jquery tmpl模板总结 .doc

1. atitit.动态模版解析
1
1.1. Jquery.tmpl.js
1
1.2. 比起anrular js方便啊。
1
2. 动态模板引擎解析原理
1
3. Table方式
1
4. Ul li方式
2
5. 参考
3

1. atitit.动态模版解析

1.1. Jquery.tmpl.js

1.2. 比起anrular js方便啊。

2. 动态模板引擎解析原理

就是把<%%>标签外面的为字符串解析。里面的作为语句解析。。。雷施于jsp编译java的原理


作者:: 老哇的爪子 Attilax 艾龙， EMAIL:1466519819@qq.com

转载请注明来源： http://blog.csdn.net/attilax

3. Table方式

localhost/lime/act/actlog_list.html?activityId=8

<table width="90%" border="1" height="" align="center" cellpadding="1" cellspacing="3" id="table1" style=" margin-left:7px; margin-top:10px;" class="table table-striped">
<thead>
<tr class="success">
<th valign="top"> </th>

<th valign="top">openid</th>
<th valign="top"> 活动金额</th>
<th valign="top"> 活动码</th>
<th> 时间</th>
<th> </th>
</tr>
</thead>
<tbody id="table1_tmpl">
<tr >
<td valign="top">${id}</td>
<td valign="top">${openId}</td>
<td valign="top"> ${bingo_money}</td>
<td valign="top"> ${ bingo_code} </td>
<td> ${awardTime}</td>
<td><input name="button3" type="submit" class="btn btn-warning " id="button3" value="删除此记录" onclick="clickx(${id})"/></td>
</tr>
</tbody>
</table>


arr=
jo.rows;



$("#table1_tmpl tr").eq(0).nextAll().remove();



　$("#table1_tmpl").tmpl(arr).appendTo('#table1');
$("#table1 tr").eq(1).hide();

4. Ul li方式

<div id="table1_tmpl">
<li class="text-left">
<img src="img/temp/2352201.jpg">
<div class="time"><u class="iconfont"></u>${ formatDate_4java(create_time) }</div>
<h1><a href="detail.html?news_id=${news_id}">${news_title}</a></h1>
<p class="desc">{{html news_content}}</p>
<div class="more"><a href="detail.html?news_id=${news_id}" class="btn-red-border">查看更多</a></div>
</li>
</div>

<div class="right-content">
<ul class="list" id="table1">

</ul>

5. 参考

(原理)最简单的JavaScript模板引擎 - Javascript教程_JS教程_技术文章 - 红黑联盟.htm
（简单） 基于HTML模板和JSON数据的JavaScript交互 « 张鑫旭-鑫空间-鑫生活.htm


Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html...
JS使用模板快速填充HTML控件数据 - Freshflower - ITeye技术网站.htm


http://api.jquery.com/jquery.tmpl/