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