JSFiddle - React, Tailwind, and code Playground

by veraee

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.js"></script>
<script id="entry-template" type="text/x-handlebars-template">
  {{#myBlock 4 }}
    {{firstname}} Foo: {{@foo}} parent foo: {{@../foo}}
    {{firstname}} Bla: {{@bla}} parent bla: {{@../bla}}<br>
    {{#myBlock 7 }}
      {{firstname}} Foo: {{@foo}} parent foo: {{@../foo}}
      {{firstname}} Bla: {{@bla}} parent bla: {{@../bla}}<br>
    {{/myBlock}}
    {{firstname}} Foo: {{@foo}} parent foo: {{@../foo}}
    {{firstname}} Bla: {{@bla}} parent bla: {{@../bla}}<br>
  {{/myBlock}}
</script>
Result <div id="output"></div>

JavaScript

Handlebars.registerHelper('myBlock', function(param, options) {
  var data;
  if (options.data) {
    data = Handlebars.createFrame(options.data);
  }
  if (!data.foo) {
    data.foo = 99;
  }
  data.bla = param;
  
  return options.fn(this, { data: data })
});

var source = $("#entry-template").html();
var template = Handlebars.compile(source);
var context = {firstname: "MyFirstname"};
var html = template(context);
$('#output').html(html);