<!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. 十个最常见的Java字符串问题

    翻译自:Top 10 questions of Java Strings 1.怎样比较字符串?用”==”还是用equals()? 简单地说,”==”测试两个字符串的引用是否相同,equals()测试两 ...

  2. UIActionSheet

    #import <UIKit/UIKit.h> @interface ViewController : UIViewController<UIActionSheetDelegate& ...

  3. 运行maven报错:经过检查是因为maven不兼容jdk1.6,重新安装1.7解决

    cmd mvn -v报错: Exception in thread "main" java.lang.UnsupportedClassVersionError: org/apach ...

  4. 【风马一族_xml】xml的两种解析思想

    xml的解析思想 dom解析 将整个xml使用类似树的结构保存在内存中,再进行对其操作 是woc组织推荐的处理xml的一种方式 需要等到xml完全加载进内存才可以进行操作 耗费内存.当解析超大的xml ...

  5. 理解 pkg-config 工具

    引用了别人的文章:http://www.chenjunlu.com/2011/03/understanding-pkg-config-tool/ 你在 Unix 或 Linux 下开发过软件吗?写完一 ...

  6. ubuntu 14.04 下FTP服务器的搭建--锁定用户目录，解决vsftpd: refusing to run with writable root inside chroot()

    FTP服务器的搭建,我要实现的需求是: 不允许匿名访问,因为我的机器不想让谁都能登录上来,随便获取文件, 需要锁定一个目录,因为在家里,我需要给媳妇下载一些电影 韩剧之类的东西,媳妇会来我机器下载,但 ...

  7. ckeditor增加上传图片的功能

    1.配置config.js开启图片上传选项卡. CKEDITOR.editorConfig = function( config ) { config.filebrowserImageUploadUr ...

  8. PHP CodeIgniter(CI)去掉 index.php

    去掉CodeIgniter(CI)默认url中的index.php的步骤: 1.打开apache的配置文件,conf/httpd.conf : LoadModule rewrite_module mo ...

  9. Linux磁盘与文件系统管理

    df df(disk free) 功能说明:显示磁盘的相关信息.语 法:df [-ahHiklmPT][--block-size=<区块大小>][-t <文件系统类型>][-x ...

  10. 【js】js 让图片旋转

     转http://www.cnblogs.com/ustcyc/p/3760116.html 核心: canvas.style.filter = "progid:DXImageTransfo ...