JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.4.js"></script>
<script id="mytemplate" type="text/x-handlebars-template">
    <h1>Using bare #if</h1>
    <dl>
    {{#each items}}
        <dt>{{name}}</dt>
        <dd>
        {{#if cost}}
            You bought {{cost}} items in our shop, thanks.
        {{else}}
            Can't find any order
        {{/if}}
        </dd>
    {{/each}}
    </dl>

    <h1>Using a conditional helper</h1>
    <dl>
    {{#each items}}
        <dt>{{name}}</dt>
        <dd>
        {{#ifCostIsZero}}
            Can't find any order
        {{else}}
            You bought {{cost}} items in our shop, thanks.
        {{/ifCostIsZero}}
        </dd>
    {{/each}}
    </dl>
</script>

CSS

h1 { font-weight:bold; }
dt { text-decoration: underline; }

JavaScript

$(document).ready(function() {
    var data = {
      items:[
       {"name": "nonZeroCost",
        "cost": 9},
       {"name": "zeroCost",
        "cost": 0}
    ]};

    Handlebars.registerHelper('ifCostIsZero', function(block) {
        if (this.cost == 0) {
            return block(this);
        } else {
            return block.inverse(this);
        }
    });

    var source = $("#mytemplate").html();
    var template = Handlebars.compile(source);
    $("body").append(template(data));
});