<!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. [翻译.每月一译.每日一段]Exploring Fonts with DirectWrite and Modern C++

    Windows with C++ Exploring Fonts with DirectWrite and Modern C++ Kenny Kerr DirectWrite is an incred ...

  2. 【转】c# yield用法

    注意事项:1.yield语句只能出现在迭代块中:2.yield return 语句不能放在 try-catch 块中的任何位置. 该语句可放在后跟 finally 块的 try 块中3.yield b ...

  3. NSS_05 数据访问选型

    在数据访问层上很想用orm框架, 选用Nhibernate或ef, 可以直接操作类对象, 避免转换, 更加的面向对象,更重要的是开发起来就方便多了. 但是从网上了解到这些框架太高级了, 用得不好到时会 ...

  4. winform 批量导入本地sql文件，批量导入mdb（access）文件到sqlserver

    0.数据库连接 private void button1_Click(object sender, EventArgs e) { this.btnUpdate.Enabled = false; #re ...

  5. MongoDB与php的配合使用 【windows版】

    通过学习了如何使用和部署MongoDB,尝试了一下如何将mongodb应用到php的程式中去. 1.预备工作 首先得准备好mongodb,并按照相关方法部署以及服务能正常运行中. 对于初学者,可以参考 ...

  6. 启动 mysql 失败 Warning:The /usr/local/mysql/data directory is not owned by the 'mysql' or '_mysql'

    Warning:The /usr/local/mysql/data directory is not owned by the 'mysql' or '_mysql' 这应该是某种情况下导致/usr/ ...

  7. 伴随ListView、RecyclerView、ScrollView滚动滑入滑出小图标--第三方开源--FloatingActionButton

    FloatingActionButton在github上的项目主页是:https://github.com/makovkastar/FloatingActionButton 它的依赖包NineOldA ...

  8. trade 1.0 开源工具

    dapper.net T4PocoGenerator/ Dapper.ColumnMapper 参考链接: http://blog.csdn.net/ymnets/article/details/85 ...

  9. Delphi XE5教程5：程序的结构和语法

    内容源自Delphi XE5 UPDATE 2官方帮助<Delphi Reference>,本人水平有限,欢迎各位高人修正相关错误! 也欢迎各位加入到Delphi学习资料汉化中来,有兴趣者 ...

  10. string和stringBuilder的区别

    曾经被问到过这个问题,回答得不是很好,在网上找了一下,园子里有大神很详细地讨论了二者的区别. http://www.cnblogs.com/yunfeng8967/articles/1093832.h ...