由上文看,模版替换的确可以很大程度降低拼接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" class="{token0}" >
Great programmers begin with: {token1}, <span>{token2}</span>
</div>
</body>
</html>
执行结果:
Great programmers begin with: hello, 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()
{
$('.hello_world').render([
{'token0': 'hello','token1': 'world'},
{'token0': 'foo','token1': 'bar'}
]);
});
</script>
</head>
<body>
<div class="hello_world" >
Great programmers begin with: {token0}, <span>{token1}</span>
</div>
<div class="hello_world" >
Other great programmers begin with: {token0}, <span>{token1}</span>
</div>
</body>
</html>
由于$("hello_world")有两个片段,故传入参数为一个数组。渲染结果
Great programmers begin with: hello, world
Other great programmers begin with: foo, bar
Other great programmers begin with: foo, bar
如果,只传入一组值,如
$('.mytemplate').render( {
'token0': 'hello', 'token1': 'world',
});
// $('.mytemplate').render( [{
// 'token0': 'hello', 'token1': 'world',
// }]);
则,所有模版均用相同值渲染即结果均为:
Great programmers begin with: hello, world
Other great programmers begin with: hello, world
Other great programmers begin with: hello, 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>
渲染结果:
- frodo has mithril armor
- sam has cloth armor
- 选择器替换
可以限定只有和指定选择器匹配的模版标签才可参与渲染。
<!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>
渲染结果:
Dogs say ...woof, ...
woof
But pigs say oink!!!
But you should see these tokens: {dog_sound}, {pig_sound} because they don't match the selector.
But pigs say oink!!!
But you should see these tokens: {dog_sound}, {pig_sound} because they don't match the selector.
- clone
刚才看见了多个模版,一条数据的情况,但实际代码里,往往模版是一个,而会有很多不同的数据依赖同一个模版生成,如何完成此需求呢,我们使用clone。
<!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" class="template {rendered_class}" ><a href="?q={query_param}" >The clone is: {your_value}</a></li>
</ul>
</body>
</html>
渲染结果:
这时大家要问,如果我只是某一块需要模版重复生成,而其它又不需要clone,怎么办,这里plugin提供了一个新的语法 @(selector),这样他就仅对此部分进行clone,例:
<!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 armor
- sam has cloth armor
- pippin has accidental armor