jquery template plugin介绍
? ?由上文看，模版替换的确可以很大程度降低拼接html带来的麻烦，然而在用法上还是比较麻烦一点，鉴于现在大多数前端js框架都是以jquery为基础的，那么现在我推荐一个更为简单的解决方案——jquery template plugin。对它作为jquery的一个插件，在很大程度上可以降低使用复杂度。但在功能上没有jstemplate强大。
?
? ?1.首先下载库文件 ?下载
?? ? 如图，templates.js就是该插件，min.js为压缩后的文件。
?
? ?2.插件的使用方法
?
$( selector ).render( values, options ); selector: jquery选择器，指定某个dom要进行渲染values: {key:value}替换的数据,也可以是一个{key:value}数组options:{ clone: (true|false) 如果是true,复制一个新的html片段，而非直接替换. Defaults to false. preserve_template: 缺省的模版渲染后，模版将会被填充重写，并且无法被二次使用. preserve_template:true 保持该模版在html中. beforeUpdate:模版渲染前触发 function( new_node ) {} //new_node即为渲染出的节点，可以通过jQuery(new_node)将其转化为jquery对象 afterUpdate: 模版渲染后触发 function( new_node ) {}}?? ? ? 3.具体例子
简单替换<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" ><head><title>Template Tests</title><script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" ></script><script type="text/javascript" src="http://jquery-templates-plugin.googlecode.com/files/templates-1.1.1.min.js" ></script><script type="text/javascript" >$(document).ready( function(){ $('#hello_world').render( {'token0': 'hello_world','token1': 'hello','token2': 'world'});});</script></head><body><div id="hello_world" >Great programmers begin with: {token1}, <span>{token2}</span></div></body></html>?执行结果：
?
<!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" xml:lang="en" lang="en" ><head><title>Template Tests</title><script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" ></script><script type="text/javascript" src="http://jquery-templates-plugin.googlecode.com/files/templates-1.1.1.min.js" ></script><script type="text/javascript" >$(document).ready( function(){ $('.hello_world').render([{'token0': 'hello','token1': 'world'},{'token0': 'foo','token1': 'bar'}]);});</script></head><body><div >Great programmers begin with: {token0}, <span>{token1}</span></div><div >Other great programmers begin with: {token0}, <span>{token1}</span></div></body></html>?由于$("hello_world")有两个片段，故传入参数为一个数组。渲染结果 $('.mytemplate').render( { 'token0': 'hello', 'token1': 'world', });// $('.mytemplate').render( [{// 'token0': 'hello', 'token1': 'world',// }]);?则，所有模版均用相同值渲染即结果均为：
?
<!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" xml:lang="en" lang="en" ><head><title>Template Tests</title><script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" ></script><script type="text/javascript" src="http://jquery-templates-plugin.googlecode.com/files/templates-1.1.1.min.js" ></script><script type="text/javascript" >$(document).ready( function () {$('#lotr').render( {'halflings' : [ {'name': 'frodo', 'armor':'mithril'},{'name': 'sam', 'armor': 'cloth' } ] });});</script></head><body><div id="lotr" ><ul><li>{halflings.0.name} has {halflings.0.armor} armor</li> //索引方式引用<li>{halflings.1.name} has {halflings.1.armor} armor</li> </ul></div></body></html>?渲染结果：<!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" xml:lang="en" lang="en" ><head><title>Template Tests</title><script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" ></script><script type="text/javascript" src="http://jquery-templates-plugin.googlecode.com/files/templates-1.1.1.min.js" ></script><script type="text/javascript" >$(document).ready( function () {$('#mytemplate').render( { '$("span, strong, p")': { dog_sound: 'woof', pig_sound: 'oink' } });});</script></head><body><div id="mytemplate" >Dogs say <span>...{dog_sound}</span>, <strong>...{dog_sound}</strong><p>But pigs say {pig_sound}!!!</p>But you should see these tokens: {dog_sound}, {pig_sound} because they don't match the selector.</div></body></html>?? 渲染结果：<!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" xml:lang="en" lang="en" ><head><title>Template Tests</title><script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" ></script><script type="text/javascript" src="http://jquery-templates-plugin.googlecode.com/files/templates-1.1.1.min.js" ></script><script type="text/javascript" >$(document).ready( function () {$('#clone_me').render([{ 'rendered_class': 'rendered','query_param' : 'x','your_value' : 'clone1' },{ 'rendered_class': 'rendered','query_param' : 'y','your_value' : 'clone2' }], {clone:true} );});</script></head><body><ul><li id="clone_me" ><a href="?q={query_param}" >The clone is: {your_value}</a></li></ul></body></html>?渲染结果：
- <!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" xml:lang="en" lang="en" ><head><title>Template Tests</title><script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" ></script><script type="text/javascript" src="http://jquery-templates-plugin.googlecode.com/files/templates-1.1.1.min.js" ></script><script type="text/javascript" >$(document).ready( function () {$('#lotr').render( {'who_says': 'Aragorn','@("li.halfling_tmpl")' : [ {'name': 'frodo', 'armor': 'mithril'},{'name': 'sam', 'armor': 'cloth' }, {'name': 'pippin', 'armor': 'accidental' } ] }, {clone: true} );});</script></head><body><div id="lotr" >{who_says}'s Famous Quotes:<ul><li class="halfling_tmpl">{name} has {armor} armor</li> </ul></div></body></html>?渲染结果：Aragorn's Famous Quotes:
frodo has mithril armorsam has cloth armorpippin has accidental armor?参考：http://ivorycity.com/blog/jquery-template-plugin/