Handlebars.js Cannot read property 'hash' of undefined

Question

There's this code:

<div id="banner-tree" class="hidden"></div>
    <script id="banner-template" type="x-handlebars-template">                  
        {{#each this}}
            {{#if this.text and this.outcomes}}
                <div class="banner-wrap" style="background-image: url({{imageSrc}});">
                    <div class="banner-desc">{{text}}</div>
                    <div class="banner-markets">Odds: {{outcomes.outcomeOdds}}</div>
                </div>
            {{else if this.outcomes}}
                <div class="banner-wrap" style="background-image: url({{imageSrc}});">
                    <div class="banner-markets">Odds: {{outcomes.outcomeOdds}}</div>
                </div>
            {{else if this.text}}
                <div class="banner-wrap" style="background-image: url({{imageSrc}});">
                    <div class="banner-desc">{{text}}</div>
                </div>                      
            {{else}}    
                <div class="banner-wrap" style="background-image: url({{imageSrc}});"></div>
            {{/if}}
        {{/each}}           
    </script>

And this script:

var templateBanner = $("#banner-template").html(); 
                var templateCompiled = Handlebars.compile(templateBanner);
                var compiledHtml = templateCompiled(response.data);
                var bannerTree = $('#banner-tree');
                bannerTree.html(compiledHtml);
                bannerTree.removeClass('hidden');

                Handlebars.registerHelper('if', function(conditional, options) {
                    if(conditional) {
                        return options.fn(this);
                    } else {
                        return options.reverse(this);
                    }
                });
                Handlebars.registerHelper('each', function(context, options) {
                    var ret = "";
                    for(var i=0, j=context.length; i<j; i++) {
                        ret = ret + options.fn(context[i]);
                    }
                    return ret;
                });

Yesterday it was all right. It worked as it should. This morning I started getting Cannot read property 'hash' of undefined . After some inquiring, I figured the fault is at {{#each this}} element. Or I guess so at least. When I change context, say, for data it doesn't produce any results (loaded JSON arrays are NOT pushed into div), but it doesn't give me error either. When I remove whole that ifology and leave just

{{#each this}}
    <div class="banner-wrap" style="background-image: url({{imageSrc}});"></div>
{{/each}}

Then it works partially. But unfortunately, I need those ifs. So, it's eather if or each. I'm trying to solve this for last two hours and I came up empty :/

Answer 1

{{#if this.text and this.outcomes}} was at fault. After redefining the whole statements just to include partial if s and else it started to work just fine.