JSFiddle - React, Tailwind, and code Playground

by 76484

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.js"></script>
<script id="Template" type="text/template">
	{{#if_greater 20 occurrences}}
     <tr class="danger">
         <td>{{this.date}}</td>
         <td>{{this.serial}}</td>
         <td>{{this.operator}}</td>
         <td>{{this.vehicle}}</td>
         <td>{{this.stop}}</td>
         <td>{{this.line}}</td>
         <td>{{this.zone}}</td>
         <td>{{this.occurrences}}</td>
         <td>{{this.encrypted}}</td>
     </tr>
	{{/if_greater}}
</script>

JavaScript

//https://stackoverflow.com/q/49960278/3397771

var raw = document.getElementById('Template').innerHTML;
var template = Handlebars.compile(raw);

var data = {
	date: 'Date',
  encrypted: 'Encrypted',
  line: 'Line',
	occurrences: 20,
  operator: 'Operator',
  serial: 'Serial',
  stop: 'Stop',
  vehicle: 'Vehicle',
  zone: 'Zone'
};

Handlebars.registerHelper('if_greater', function (a, b, opts) {
    if (a >= b) return opts.fn(this);
    return opts.inverse(this);
});

document.body.innerHTML = template(data);