JsRender系列demo(5)compline

<!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>

时间： 2025-01-02 01:40:01

JsRender系列demo(5)compline的相关文章

JsRender系列demo(6)-无名

<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery.js" type="text/javascript"></script> <script src="../../jsrender.js" type="text/javascript"></script>