JSFiddle - React, Tailwind, and code Playground

by ermakovnikolay

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.js"></script>
<script id="wrapper" type="text/x-handlebars-template">

{{#times this}}
{{/times}}




</script>

CSS

div {
  width:50px;
  height:50px;
  margin: 10px;
}

JavaScript

Handlebars.registerHelper('times', function (index, options) {
		var result = '';
    for(var i = 0; i < 4; i++) {
       if(options.data.root.product.image[i]){
          result += '<div style="background-image:url(https://upload.wikimedia.org'+options.data.root.product.image[i]+')"></div>';
       } else {
          result += '<div>empty div</div>';
       }       
   }
   return result;
});

var source   = $("#wrapper").html();
var template = Handlebars.compile(source);

var data = { 
    product: {
    	image: [
      	'/wikipedia/commons/thumb/a/a7/RedcrestedTuraco.jpg/300px-RedcrestedTuraco.jpg',
        '/wikipedia/commons/thumb/c/c0/Balaeniceps_rex.jpg/220px-Balaeniceps_rex.jpg',
        '/wikipedia/commons/thumb/a/a6/White-tailed_Tropicbird_-_Phaeton_lepturus.jpg/240px-White-tailed_Tropicbird_-_Phaeton_lepturus.jpg'
        ]
   }
}


$('body').append(template(data));