| Index: chrome/third_party/jstemplate/tutorial_examples/12-parent.html
|
| ===================================================================
|
| --- chrome/third_party/jstemplate/tutorial_examples/12-parent.html (revision 0)
|
| +++ chrome/third_party/jstemplate/tutorial_examples/12-parent.html (revision 0)
|
| @@ -0,0 +1,59 @@
|
| +<html>
|
| +<head><title>Jstemplates: Quick example</title>
|
| + <script src="../util.js" type="text/javascript"></script>
|
| + <script src="../jsevalcontext.js" type="text/javascript"></script>
|
| + <script src="../jstemplate.js" type="text/javascript"></script>
|
| + <script type="text/javascript">
|
| + var user = "Jane User";
|
| +
|
| + var tpl1Data = {addresses:[
|
| + {location:"111 8th Av.", label:"NYC front door"},
|
| + {location:"76 9th Av.", label:"NYC back door"},
|
| + {location:"Mountain View", label:"Mothership"}
|
| + ]
|
| + };
|
| +
|
| + var tpl2Data = {addresses:[
|
| + {location:"534 Carlton Ave."},
|
| + {location:"772 Broadway"}
|
| + ]
|
| + };
|
| +
|
| + function showData() {
|
| + // This is the javascript code that processes the template:
|
| + var parent = new JsEvalContext();
|
| + parent.setVariable('username', user);
|
| +
|
| + var input1 = new JsEvalContext( tpl1Data, parent);
|
| + var output1 = document.getElementById('tpl1');
|
| + jstProcess(input1, output1);
|
| +
|
| + var input2 = new JsEvalContext( tpl2Data, parent);
|
| + var output2 = document.getElementById('tpl2');
|
| + jstProcess(input2, output2);
|
| + }
|
| + </script>
|
| +</head>
|
| +<body onload="showData()">
|
| +
|
| +
|
| +<div id="tpl1">
|
| +<h1>
|
| + <span jsselect="username" jscontent="$this">User de Fault</span>'s
|
| + Address Book
|
| +</h1>
|
| +<table cellpadding="5">
|
| +<tr><td><h2>Location:</h2></td><td><h2>Label:</h2></td></tr>
|
| +<tr jsselect="addresses"><td jscontent="location"></td><td jscontent="label"></td></tr>
|
| +</table>
|
| +</div>
|
| +
|
| +<div id="tpl2">
|
| +<h1 jsselect="username" jscontent="$this + '\'s Previous Searches'"></h1>
|
| +<ul>
|
| +<li jsselect="addresses" jscontent="location"></li>
|
| +</ul>
|
| +</div>
|
| +
|
| +</body>
|
| +</html>
|
|
|