How to check whether object is empty in handlebars if statement?

Question

In handlebars i need to check if an object is empty and if it isn't then i need to run a loop to grab the content from the object. Below is my code and a link to codepen. I imagine this is quite simple but nothing seems to work. I would have thought that the handlebars #if statement would see an empty object as undefined or 0 and ultimately the condition would be unfulfilled.

<div class="temp"></div>

<script id="temp" type="x-handlebars-template">
    {{#if tabs}}
    <p>true</p>
    {{/if}}
</script>

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

var tabs = {};

var context = {
    tabs: tabs
}

$('.temp').html(template(context));

http://codepen.io/matt3224/pen/gaKyKv?editors=101

Answer 1

You can just use the built in handlebars each helper to accomplish what you're looking for, and you can even conditionally render something with an empty object:

 var template = Handlebars.compile($("#temp").html()); var tabs = {}, test = {a: "Resources", b: "Contact"}; var context = { tabs: tabs, test: test } $('.temp').html(template(context));

 <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.0/handlebars.min.js"></script> <div class="temp"></div> <script id="temp" type="x-handlebars-template"> <h3>each helper on empty object</h3> {{#each tabs}} <p>Key: {{@key}} Value = {{this}}</p> {{else}} <p>Your tabs object is empty!</p> {{/each}} <h3>each helper on non-empty object</h3> {{#each test}} <p>Key: {{@key}} Value = {{this}}</p> {{else}} <p>Your test object is empty!</p> {{/each}} </script>