<!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. 状态模式（State）

    状态模式,从字面意思上来讲应该是很简单的,就是针对实际业务上的内容,当类的内部的状态发生改变时,给出不同的响应体,就像现实中的人一样,早上没有吃饭,状态不好,上班.上课都会打哈欠,中午了,吃过午饭,又 ...

  2. 【风马一族_Python】 决策树

    <机器学习实战>第三章 决策树 ------------------------------------- #1 trees.py 计算给定数据集的香农熵 ---------------- ...

  3. git 的使用(4)-git暂缓区工作区原理和修改删除等命令

    文章转载自:http://blog.csdn.net/think2me/article/details/39056379 博主说未经本人允许,不得转载,那就不贴了,拷贝关键部分作备忘 1. 暂存区是G ...

  4. mount.nfs: access denied by server while mounting localhost:/home/xuwq/minilinux/system

    在执行命令如下: mount -t nfs localhost:/home/xuwq/minilinux/system /mnt 出现的错误: mount.nfs: access denied by ...

  5. Mac OS + Nginx + Mysql + PHP 本地环境搭建

    本文是用Mac系统下搭建的环境,使用Linux的童鞋也不要在意,因为很相似,只有下载安装的方式有一点区别.直接进入正文: 1.首先我们需要下载Homebrew,Homebrew简称brew,是Mac ...

  6. 2013-07-22 IT 要闻速记快想

    ### ========================= ### 如何让用户点击广告.观看广告并乐在其中?这个问题的答案精彩纷呈.有的公司开创模式,为点击广告的用户提供优惠券:有的公司想法新奇,让用 ...

  7. Global::time2StrHHMM_DNT

    /*************************************************** Created Date: 13 Jul 2013 Created By: Jimmy Xie ...

  8. WPF 心形线算法

    今天在网上查找下心形算法公式,自己便按照公式写下来标记在博客,主要是方便以后查看! private int maxStep = 520; private double radius; private ...

  9. cadence PCB绘制步骤

    1 创建一个PCB文件  file -> new 2 创建一个板框  add -> line ,在 options 选型中选择好,板框为 长 4400mil 宽 3200 3 给PCB板框 ...

  10. http概述

    HTTP是一个属于应用层的面向对象的协议,由于其简捷.快速的方式,适用于分布式超媒体信息系统.它于1990年提出,经过几年的使用与发展,得到不断地完善和扩展.目前在WWW中使用的是HTTP/1.0的第 ...