Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Demo: Stache Data Helper">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
<script src="//canjs.com/release/2.2.4/can.jquery.js"></script>
<script src="//canjs.com/release/2.2.4/can.stache.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  
  
  
<script type="template/stache" id="stacheTemplate">
<h3>Using the Data Helper with data other than the current Stache context.</h3>
<ul>
  {{#people}}
  <!-- Setting the event data manually. -->
  <li {{data 'person' event}}>{{name}}</li>
  {{/people}}
</ul>
<hr>
<h3>Recalling data later</h3>
The data from the first list item is
<strong id="output"></strong>
</script>
  
  
  
  
</body>
</html>
 
var data = {
  event:"Half Marathon",
  people:[
    {name: 'Austin'},
    {name: 'Homer'}
  ]
};
// Reference the template by its id and render with the data.
document.body.appendChild(
      can.view('stacheTemplate', data));
// Retrieving the data that was set in the template.
var event = $('li:first-child').data('person');
$('#output').text(event);
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x