Question

在我的对象中，我有属性的顶级和子级别（链接） - 我需要将类名添加到模板中的每个“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 is here

Answer 1

你的助手功能很好。但是，您的模板需要进行一些更改。您希望#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"
    }]
}]

Handlebars模板 - 使用Helper功能后，我的子级链接丢失了

1 个答案: