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