atitit.jquery tmpl模板总结 .doc

1. atitit.动态模版解析1

1.1. Jquery.tmpl.js1

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:[email protected]

转载请注明来源： http://www.cnblogs.com/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/