Handlebars template - using if conditional with each array loop, not getting correct result

Question

In my Handlebars template i am using a if condition to find the array and looping using the each iterator. the direct children(array) works, but i am not able to iterate the sub arrays..

here is my object and template:

var page = {
   "DashBoard":[
    {"tittle":"DashBoard"},
    {"widget":[{"slide":"To do"},{"slide":"Teamspace"},{"slide":"Recent Activity"}]},
    {"activity":[
        {"option":[{"show":"Volvo"},{"show":"Benz"},{"show":"Honda"}]},
        {"rows":[
            {"dTittle":"Advert1", "text":"sample text1", "date":"22-06-2013"}
            ,{"dTittle":"Advert2", "text":"sample text2", "date":"22-06-2014"}
            ,{"dTittle":"Advert3", "text":"sample text3", "date":"22-06-2015"}
            ,{"dTittle":"Advert4", "text":"sample text4", "date":"22-06-2016"}
            ,{"dTittle":"Advert5", "text":"sample text5", "date":"22-06-2017"}
        ]}
    ]}

   ]
}


var temp = Handlebars.compile($("#pageTemp").html());
$("#page").html(temp(page["DashBoard"]));

my template is :

<div id="page"></div>

<script id="pageTemp" type="handlebars-x-template">

 {{#each this}}

    <div>
    <h2>{{tittle}}</h2>
    <ul>
        {{#if this.widget.length}}
            {{#each this.widget}}
                <li>{{slide}}</li>
            {{/each}}
        {{/if}}
    </ul>

    <div>
        {{#if this.activity.length}}
            <select>
                {{#if this.activity.option.length}}
                        {{#each this.activity.option}}
                            <option>{{show}}</option>
                        {{/each}}
                {{/if}}
            </select>
                {{#if this.activity.rows.length}}
                    {{#each this.activity.rows}}
                        <p>
                            <span>{{dTittle}}</span>
                            <div>{{text}} <span>{{date}}</span></div>
                        </p>
                    {{/each}}
                {{/if}}
        {{/if}} 
    </div>

</div>

    {{/each}}

</script>

But i am not getting correct result using this both.. what is wrong here any one help me to get the proper result?

Here is the fiddle

Thanks in advance!

Answer 1

I changed my template like this it works!

here is my template:

<div id="page"></div>

<script id="pageTemp" type="handlebars-x-template">
<div>
     {{#if this}} 
        {{#each this}}
            {{#if this.tittle}} <h1>{{this.tittle}}</h1>{{/if}}
            {{#if this.widget}} <ul> {{#each this.widget}} <li>{{slide}}</li> {{/each}} </ul>{{/if}}
            {{#if this.activity}}
                {{#each this.activity}}
                    {{#if this.option}}
                        <select>{{#each this.option}}<option>{{show}}</option>{{/each}}</select>
                    {{/if}}
                    {{#if this.rows}}
                        <ol>{{#each this.rows}}
                            <li><h2>{{dTittle}}</h2><p>{{text}}</p><span>{{date}}</span></li>
                       {{/each}}</ol>
                    {{/if}}
                {{/each}}
            {{/if}}
        {{/each}}
    {{/if}}
</div>

</script>

Still any one find any issue or good way to get the same result let me know.. thanks!

Here is the fiddle

Thanks to all..