2

我有一个示例对象，我试图用它制作一个导航栏，每个对象li都有一个自定义类名，如下所示：

<ul>
      <li class="mainLink1">
          <a href="m1/home.html">home</a>
          <ul class="subParent1">
              <li class="sublink1"><a href="s1/home.html">s1/home</a></li>
              <li class="sublink2"><a href="s2/home.html">s2/home</a></li>
         </ul>
     </li>
     <li class="mainLink2">
         <a href="m2/service.html">service</a>
         <ul class="subParent2">
             <li class="sublink1"><a href="s1/service.html">s1/service</a></li>
             <li class="sublink2"><a href="s2/service.html">s2/service</a></li>
        </ul>
     </li>
</ul>

我知道所有这些类名都必须由辅助函数生成，但我很困惑，因为我无法得到正确的结果。这是我的尝试。

我的带有模板的html：

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

<script type="text/handlebars-x-template" id="menu">
    <ul>
        {{#list}}
           <li><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>

我的辅助功能和实现：

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"}]}]

Handlebars.registerHelper("list", function(context, option){
    console.log(context, option);
})

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

我同意我的尝试非常糟糕。纠正它并使用 @index 属性应用类名的任何帮助。

上面的小提琴。

4

1 回答 1

2

首先，您custom helper没有上下文，这只不过是使用助手名称传入的上下文对象

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

所以默认情况下，context参数将是options

上下文是传递给助手的

 {{#list this}}
          ^------ This is the context

接下来您的对象是一个对象数组，因此您的方法将不起作用。您需要更改使用模板结构的方式，或者遍历对象并将单个对象传递给模板。

并且没有持有该属性的被key调用者listsub

{{#if list.sub}}

应该是

{{#if this.sub}}

代码

Handlebars.registerHelper("list", function(context, options) {
    // Return fn from options that will pass in the object to
    // the truthy function
    console.log(context + ' :: ' + options); 
    return options.fn(this);
})

// Compile your template
var temp = Handlebars.compile($("#menu").html());
var $ul = $('#navigate > ul');
// Append it to the container after iterating over array of objects
for(var i=0; i<obj.length; i++) {
    $ul.append(temp(obj[i]));
}

检查小提琴

更新

那么在这种情况下，您首先不需要模板助手。只需使用each循环并@index遍历列表。

模板

<script type="text/handlebars-x-template" id="menu">
    {{#each this}}
        <li class="mainLink{{@index}}">
            <a href="{{link}}">{{name}}</a>
        {{#if this.sub}}
            <ul class="subParent{{@index}}">
                {{#each this.sub}}
                    <li class="sublink{{@index}}"><a href="{{slink}}">{{sname}}</a></li>
                {{/each}}
            </ul>
        {{/if}}
      </li>
    {{/each}}
</script>

检查小提琴

于 2013-08-23T05:38:41.657 回答