0

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

しかし、私はこの両方を使用して正しい結果を得ていません..ここで何が間違っているのですか?誰かが適切な結果を得るのを助けてくれますか?

ここにフィドルがあります

前もって感謝します！

4

1 に答える 1

0

テンプレートをこのように変更しました。

ここに私のテンプレートがあります:

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

それでも、問題や同じ結果を得るための良い方法を見つけた人は、私に知らせてください..ありがとう!

ここにフィドルがあります

ありがとうございます..

于 2013-08-28T08:43:17.297 に答える