atitit.jquery tmpl模板总结 .doc

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:1466519819@qq.com

转载请注明来源： 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/