Handlebars模板 - 如果條件與每個數組循環使用，沒有得到正確的結果

Question

在我的Handlebars模板中，我使用if條件來查找數組並使用每個迭代器循環。直接孩子（陣列）的作品，但我不能夠迭代子陣列..

這裏是我的對象和模板：

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> 

但我沒有得到正確的結果使用這兩個..這裏有什麼錯在任何一個幫助我得到正確的結果？

Here is the fiddle

提前感謝！

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> 

不過任何一個發現的任何問題或好的方法來得到相同的結果讓我知道..謝謝！

Here is the fiddle

感謝所有..