Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/mootools/1/mootools-yui-compressed.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.js"></script>
<script src="http://code.jquery.com/jquery-git2.js"></script> 
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<button id="btnInvoker">Click Me</button>
<div id="outlet">
  <table>
    <thead>
      <tr>
        <th>Hour</th>
        <th>Min</th>
        <th>Sec</th>
      </tr>
    </thead>
    <tbody id="tblContent">
      
    </tbody>
  </table>
</div>
​
  <script id="rowTemplate" type="text/x-handlebars-template">
    <tr>
      <td>{{hour}}</td>
      <td>{{minute}}</td>
      <td>{{seconds}}</td>
    </tr>
  </script>
  
</body>
</html>
 
$(document).ready(function(){
  var rowTemplate = Handlebars.compile($('#rowTemplate').html());
 
  
  $('#btnInvoker').on('click',function(){    
    
    var data = {hour:1,minute:2,seconds:3};
      var compiledTemplate = rowTemplate(data);
    $('#tblContent').append(compiledTemplate);
  });
  
  $('#tblContent').on('hover','td',function(event){
    console.log("hovered");
  });
  
  $('#tblContent').on('click','td',function(event){
    console.log("clicked");
  });
});
Output

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

Dismiss x
public
Bin info
perpetualcoderpro
0viewers