JSFiddle - React, Tailwind, and code Playground

by tonytlwu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.1.2/handlebars.min.js"></script>
<div id="target"></div>

<script type="text/html" id="template-slider">
<div data-class="swiper-container">
  <div data-class="swiper-wrapper">
  	{{#noop}}{{slides}}{{/noop}}
  </div>
  <div data-class="swiper-pagination"></div>
  <div data-class="swiper-button-prev"></div>
  <div data-class="swiper-button-next"></div>
</div>
</script>

<script type="text/html" id="template-slide">
{{sliderStart}}
  {{slideStart}}
  	Slide 1
  {{slideEnd}}
  {{{slideStart}}}
  	Slide 2
  {{slideEnd}}
{{sliderEnd}}
</script>

JavaScript

Handlebars.registerHelper('sliderStart', function (text, context) {
	return new Handlebars.SafeString('<div class="swiper-container"><div class="swiper-wrapper">');
});

Handlebars.registerHelper('sliderEnd', function (text, context) {
	return new Handlebars.SafeString('</div><div class="swiper-pagination"></div><div class="swiper-button-prev"></div><div class="swiper-button-next"></div></div>');
});

Handlebars.registerHelper('slideStart', function (text, context) {
	return new Handlebars.SafeString('<div class="swiper-slide">');
});

Handlebars.registerHelper('slideEnd', function (text, context) {
	return new Handlebars.SafeString('</div>');
});

var src = $('#template-slide').html();
var tpl = Handlebars.compile(src);

$('#target').html(tpl());