jquery - Handlebars 模板 - 对每个数组循环使用 if 条件，没有得到正确的结果

Question

在我的 Handlebars 模板中，我使用 if 条件来查找数组并使用 each 迭代器进行循环。直接子项（数组）有效，但我无法迭代子数组..

这是我的对象和模板：

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"]));

我的模板是：

<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>

但是我使用这两者都没有得到正确的结果..这里有什么问题可以帮助我得到正确的结果？

这是小提琴

提前致谢！

Answer 1

我像这样更改了我的模板，它可以工作！

这是我的模板：

<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>

仍然有人发现任何问题或获得相同结果的好方法让我知道..谢谢！

这是小提琴

谢谢大家..