Codebase Browser
chromium
Go to App

chromium/third_party/jstemplate/tutorial_examples/12-parent.html 

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