0

私のオブジェクトには、プロパティ (リンク) のトップ レベルとサブ レベルがありますli。テンプレートの各 " " にクラス名を追加する必要があります。このために、ヘルパー関数を使用しています。

しかし、私はリンクのサブレベルを取得していません..

誰でもこれを手に入れるのを手伝ってくれます..

ここに私のオブジェクトがあります:

var obj = [{
    "name": "home",
    "link": "m1/home.html",
    "sub": [{
        "sname": "s1/home",
        "slink": "s1/home.html"
    }, {
        "sname": "s/home",
        "slink2": "s2/home.html"
    }]
}, {
    "name": "service",
    "link": "m2/service.html",
    "sub": [{
        "sname": "s1/service",
        "slink": "s1/service.html"
    }, {
        "sname": "s/service",
        "slink2": "s2/service.html"
    }]
}]

私のテンプレートはここにあります：

<div id="navigate"></div>


<script type="text/handlebars-x-template" id="menu">
    <ul>
        {{#list this}}
           <li class="{{className}}"><a href="{{link}}">{{name}}</a></li>
            {{#if list.sub}}
                <ul>
                    {{#each this}}
                       <li><a href="{{link}}">{{name}}</a></li>
                    {{/each}}
                </ul>
            {{/if}}
        {{/list}}
    </ul>
</script>

私のヘルパー関数はここにあります：

Handlebars.registerHelper("list", function(context, option){

    var output = "";

    for(i=0;i<context.length;i++){

        context[i].className = "class"+i;

        if(context[i]["sub"]){

            for(x=0; x < context[i]["sub"].length;x++){

                context[i]["sub"][x].subClass = "subClass"+x;

                console.log(context[i]["sub"][x]); //printing properly.

            }

        }
        output += option.fn(context[i]); // i am only getting top levle the sub level link is missing..
    }

    return output;

})

var temp = Handlebars.compile($("#menu").html());
var html = $("#navigate").html(temp(obj));

ここでヘルパー関数が間違っていることを理解しています。誰か修正して助けてください。

jsFiddleはこちら

4

1 に答える 1

2

ヘルパー関数は問題ありません。ただし、テンプレートにはいくつかの変更が必要です。#each this.sub内部リストを反復処理したい 。また、内部リストのメンバー var 名が間違っていました。最後に、いくつかのアイテムの sub[x].slink の名前を slink2 に変更していました。http://jsfiddle.net/DKnSU/

<script type="text/handlebars-x-template" id="menu">
    <ul>
        {{#list this}}
           <li class="{{className}}"><a href="{{link}}">{{name}}</a></li>
            {{#if this.sub}}
                <ul>
                    {{#each this.sub}}
                       <li class="{{subClass}}"><a href="{{slink}}">{{sname}}</a></li>
                    {{/each}}
                </ul>
            {{/if}}
        {{/list}}
    </ul>
</script>

var obj = [{
    "name": "home",
    "link": "m1/home.html",
    "sub": [{
        "sname": "s1/home",
        "slink": "s1/home.html"
    }, {
        "sname": "s/home",
        "slink": "s2/home.html"
    }]
}, {
    "name": "service",
    "link": "m2/service.html",
    "sub": [{
        "sname": "s1/service",
        "slink": "s1/service.html"
    }, {
        "sname": "s/service",
        "slink": "s2/service.html"
    }]
}]
于 2013-08-23T14:54:51.410 に答える