首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

jTemplates 运用

2012-10-06 
jTemplates 使用jTemplates是一个基于JQuery的模板引擎插件,功能强大,有了他你就再不用为使用JS绑定数据集

jTemplates 使用

jTemplates是一个基于JQuery的模板引擎插件,功能强大,有了他你就再不用为使用JS绑定数据集时发愁了。

使用Templates就感觉用jstl标签编写jsp程序,再配合一些缓存插件,对性能提高有很大帮助。

再配合??delegate事件处理方法可以写非常简洁的js程序。

?jTemplates官网地址官网的文档写得非常的

http://jtemplates.tpython.com/#results

?

?jQuery的.bind()、.live()和.delegate()之间的区别请看这里

?http://article.yeeyan.org/view/213582/179910

?

?

<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>jTemplates</title></head><body><div id="result"></div><div id="foreachResult"></div></body><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script src="http://jtemplates.tpython.com/jquery-jtemplates_uncompressed.js"></script>
<!-- 这里使用一个 script标签内容来存储显示模板,这也现在大多数js模板的做法 foreach的用法-->
<script type="text/template" id="foreach"><table><thead><tr><td>Index</td><td>Iterator</td><td>Name</td><td>Age</td><td>First?</td><td>Last?</td></tr></thread><tbody>{#foreach $T.table as record begin=1}<tr><td>{$T.record$index}</td><td>{$T.record$iteration}</td><td>{$T.record.name}</td><td>{$T.record.age}</td><td>{$T.record$first}</td><td>{$T.record$last}</td></tr>{#/for}</tbody></table></script><script>//$("#result").setTemplate("Template by {$T.bold()} version <em>{$Q.version}</em>.");//$("#result").processTemplate("jTemplates");$(function($){var data = { name: 'User list', list_id: 6, table: [ {id: 1, name: 'Anne', age: 22, mail: 'anne@domain.com'}, {id: 2, name: 'Amelie', age: 24, mail: 'amelie@domain.com'}, {id: 3, name: 'Polly', age: 18, mail: 'polly@domain.com'}, {id: 4, name: 'Alice', age: 26, mail: 'alice@domain.com'}, {id: 5, name: 'Martha', age: 25, mail: 'martha@domain.com'} ]};var mydata = { name: "Anne", age: "20" };$("#result").setTemplate("{#if $T.list_id == 4} good {#elseif $T.list_id == 5} normal {#else} bad {#/if}");$("#result").processTemplate(data);$('#foreachResult').setTemplate($('#foreach').html()).processTemplate(data);$('#foreachResult').delegate('td','click',function(){alert($(this).text());});});</script></html>

热点排行