JSFiddle - React, Tailwind, and code Playground

by staeff

HTML

<h2>Normal</h2>
<ul id="list1">
  <script id="first_template" type="text/x-handlebars-template">
   {{#each staff}}
      <li>
         Name: {{name}} , Company: {{../company}}
      </li>
  {{/each}}
  </script>
 </ul>

<h2>With partial</h2>
<script id="list-partial" type="text/x-handlebars-template">
      <li>
         Name: {{name}} , Company: {{../company}}
      </li>
</script>

<ul id="list2">
  <script id="second_template" type="text/x-handlebars-template">
   {{#each staff}}
     {{> list}}
   {{/each}}
  </script>
 </ul>

<!-- Necessary libraries -->
<script src="//code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.min.js"></script>

JavaScript

var data = { staff: [
             {"name": "Alan"},
             {"name": "Bettina"}
              ],
              "company": "Rad, Inc."};

// first list straight forward
var compile = Handlebars.compile($('#first_template').html());
$('#list1').html(compile(data));
    
// Second List with a partial    
Handlebars.registerPartial("list", $("#list-partial").html()); 
var compile = Handlebars.compile($('#second_template').html());
$('#list2').html(compile(data));