<!DOCTYPE html>

<html>

<head>

	<script src="http://code.jquery.com/jquery.js" type="text/javascript"></script>

	<script src="../../jsrender.js" type="text/javascript"></script>

 	<link href="../resources/demos.css" rel="stylesheet" type="text/css" />

</head>

<body>

<a href="../demos.html">JsRender Demos</a><br />

<h3>Accessing paths</h3>

<script id="peopleTemplate" type="text/x-jsrender">

	<b>{{:#index+1}}:</b> {{>firstName}} {{>lastName}}:

	<br/>

	{{for address tmpl="#addressTemplate"}}{{else}}

		Address missing

	{{/for}}

	<div>

		Phones:

		{{for ~combine(phones, cells)}}

			<b>{{>#data}}</b> ({{>#parent.parent.data.firstName}}'s)

		{{else}}

			{{>#parent.data.firstName}} has no phones or cells

		{{/for}}

{{!-- or provide an alias to get to firstName from nested content

		Phones:

		{{for ~combine(phones, cells) ~frstNm=firstName}}

			<b>{{>#data}}</b> ({{>~frstNm}}'s)

		{{else}}

			{{>~frstNm}} has no phones or cells

		{{/for}}

--}}

	</div>

	<br/>

	<i>

		{{>firstName}}

		{{if address && address.street}}  {{!-- address may be null or undefined --}}

			lives in {{>address.street}}.

		{{else}}

			has no address...

		{{/if}}

	</i>

	<hr/>

</script>

<script id="addressTemplate" type="text/x-jsrender">

<div>

	{{if street}}

		{{>street}}

	{{else}}

		<i>Somewhere</i> in

	{{/if}}

	{{>city}}

</div>

</script>

<div id="peopleList"></div>

<script type="text/javascript">

	var people = [

		{

			firstName: "Pete",

			lastName: "Ruffles",

			address: {

				city: "Bellevue"

			},

			cells: ["425 666 3455", "425 222 1111"]

		},

		{

			firstName: "Xavier",

			lastName: "NoStreet",

			phones: ["222 666 3455"],

			cells: ["444 666 3455", "999 222 1111"]

		},

		{

			firstName: "Christie",

			lastName: "Sutherland",

			address: {

				street: "222 2nd Ave NE",

				city: "Redmond"

			}

		}

	];

	$.views.tags({

		notLast: function( content ) {

			var array = this.parent.data;

			return array[ array.length - 1 ] === this.data ? "" : content( this );

		}

	});

	$.views.helpers({

		combine: function( arr1, arr2 ) {

			return arr1 && arr2 ? arr1.concat(arr2) : arr1 || arr2;

		}

	});

	$( "#peopleList" ).html(

		$( "#peopleTemplate" ).render( people )

	);

</script>

</body>

</html>

　　

JsRender系列demo(7)compline的更多相关文章

  1. JsRender系列demo(9)自定义函数

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  2. JsRender系列demo(6)-无名

    <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery.j ...

  3. JsRender系列demo(5) for else

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  4. JsRender系列demo(4)-if else

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  5. JsRender系列demo(3)-自定义容器

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  6. JsRender系列demo(2)多模板-template

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  7. JsRender系列demo(1)-insert-data

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  8. JsRender系列-11

    <!DOCTYPE html> <html> <head> <script type="text/javascript" src=&quo ...

  9. JsRender系列demo-10

    <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery.j ...

随机推荐

  1. UVA 1646 Edge Case

    题意:n(3<=n<=10000)个结点组成一个圈,点顺次连接为边,求没有公共点的边集个数. 分析: 1.推规律,n=3有4个,n=4有7个,n=5有11个,n=6有18个,--,a[i] ...

  2. Regionals 2013 :: North America - Southeast USA

    Regionals 2013 :: North America - Southeast USA It Takes a Village As a Sociologist, you are studyin ...

  3. 设计main函数退出后继续执行一段代码

    原理: 使用 _onexit() 函数注册一个函数,这个函数会在main函数退出后执行 使用原则: 1.包含在cstdlib中,是c语言中的库函数: 2.需要注册的函数格式为:int类型返回值.无参数 ...

  4. 《gpg文件加密的使用》RHEL6

    甲端: 首先是要生成一对密钥: 提示是否要生成2048个字节的密钥对:   下面都是生成密钥对时的步骤: 按“o”键开始生成密钥对: 提示要我给密钥对加个密码: 输入2次 之后密钥对的字符需要我按键盘 ...

  5. DWZ前端框架使用问题记录

    心得体验:DWZ依赖特定的HTML结构,所以一定要注意项目中的HTML结构,多用firebug查看,还有如果使用一些组件的时候出现问题,可以查看下返回JSON格式是否符合组件规定的JSON格式,很多都 ...

  6. yum最常用的命令

    yum是一个用于管理rpm包的后台程序,用python写成,可以非常方便的解决rpm的依赖关系.在建立好yum服务器后,yum客户端可以通过 http.ftp方式获得软件包,并使用方便的命令直接管理. ...

  7. 解析php时间戳与日期的转换

    php中时间戳与日期的转换. 实现功能:获取某个日期的时间戳,或获取某个时间的PHP时间戳. strtotime能将任何英文文本的日期时间描述解析为Unix时间戳,我们结合mktime()或date( ...

  8. centOS 一键php环境安装-php博弈

    我是方少,闲着没事,感觉每次编译安装,再修改php,mysql,redis,nginx配置文件觉得把大好的青春时间都浪费掉了.如是想着,怎样一键安装 php环境和相关配置.于是拜读了一下lnmp的一键 ...

  9. .NET开发Windows Service程序 - Topshelf

    在实际项目开发过程中,会经常写一些类似定时检查,应用监控的应用.这类应用在windows平台通常都会写成window service程序. 在百度上搜索一下'c#开发windows service', ...

  10. 非阻塞io与记录锁

    非阻塞io 1.对比 阻塞io的例子:scanf从终端获取输入时,如果不输入程序就会一直停在那; 对一个已经有写锁的文件请求读时, 会一直空等直到前面的进程释放锁... 非阻塞的例子:读取文件内容, ...