JSFiddle - React, Tailwind, and code Playground

by fparent

HTML

<div class="page">
    <!-- This section will be rendered server-side initially on the page load -->
    <section>
        {{> section}}
    </section>

    <!-- I would like to load the content of this section dynamically based on a JSON file -->
    <div id="posts"></div>
    <script id="posts-tmpl" type="text/x-handlebars-template">
    	{{#each posts}}
      	<div class="post">
        	<h2>{{title}}</h2>
        	{{description}}

          {{#each categories}}
          	{{cat_name}}
          {{/each}}
				</div>         
			{{/each}}
		</script>
</div>

<button id="btn">Load posts dynamically</button>

JavaScript

$( '#btn' ).on( 'click', function() {
	let rawTemplate = $( '#posts-tmpl' ).html();
  let template = Handlebars.compile( rawTemplate );
  let html = template( JSON_TEST );
  
  $( '#posts' ).html( html );
});