jquery template plugin介绍

ully

浏览: 268904 次
性别:
来自: 北京

最近访客更多访客>>

jtjs1989

layogo

acoolper

bianrongxin

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jstemplate

由上文看，模版替换的确可以很大程度降低拼接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

如果，只传入一组值，如

 $('.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

如果模版多余传入值数组，则后面的模版值均被渲染成最后一个数组元素的值。

嵌套结构数据

比较简单，直接看例子

<!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.

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: