<!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. Data truncated for column 错误

    今天插入mysql数据数据时,报错Data truncated for column.研究了一下原理是我数据的长途超出了该字段的最大长度,所以解决办法很简单,就是修改数据库中字段属性,使其长度增加即可 ...

  2. arduino入门学习实现语音控制LED灯

    需要的准备的硬件arduino+PC+麦克风实现语音命令控制LED灯的亮灭. 首先需要将写好的arduino程序烧录到arduino uno主板中,下面是代码如下: int val;//定义变量val ...

  3. CentOS 普通用户设置sudo权限

    1.先切换到root用户下,输入命令 su 2.添加sudo文件的写权限,命令是: chmod u+w /etc/sudoers 3.编辑sudoers文件 vi /etc/sudoers 找到 ro ...

  4. c# 刻度：毫米 英寸 像素转换

    从目前所掌握的资料来看,c#程序中将毫米转换像素的方法无非两种: 第一种: 1: /// <summary> 2: /// 以毫米为单位的显示宽度 3: /// </summary& ...

  5. Python脚本控制的WebDriver 常用操作 <二十> 处理表单元素

    测试用例场景 表单对象的操作比较简单,只需要记住下面几点 使用send_keys方法往多行文本框和单行文本框赋值: 使用click方法选择checkbox 使用click方法选择radio 使用cli ...

  6. 1107. Social Clusters (30)

    When register on a social network, you are always asked to specify your hobbies in order to find som ...

  7. Redis集群明细文档

    Redis目前版本是没有提供集群功能的,如果要实现多台Redis同时提供服务只能通过客户端自身去实现(Memchached也是客户端实现分布式).目前根据文档已经看到Redis正在开发集群功能,其中一 ...

  8. EditPlus64的安装配置

    下载地址,直接到360下载即可,下载完毕之后,进入如下网址,完后在线生成注册码 http://www.jb51.net/tools/editplus/ 以上是文本编辑器EditPlus的安装以及注册, ...

  9. CPU原理

    cpu map 1.CPU的整体架构: 2.从CPU向内存 3.CPU和内存的关系图 4.CPU指令集 5.A+B 6.结果输入寄存器 7.寄存器中的临时存储,用来暂存B 8.将B传入寄存器 9.A会 ...

  10. MAC 升级到10.10（OS X Yosemite）下apache＋php的配置问题

    MAC升级到最新系统后 本地测试的站点不能正常运行,其原因是mac系统升级后 他的apache的版本也随之升级了版本 Server version: Apache/2.4.9 (Unix) Serve ...