jquery - 如何使用辅助函数将自定义类名称添加到 Handlebars 模板中的元素？

Question

我有一个示例对象，我试图用它来制作导航栏，每个 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 属性应用类名。

A fiddle for the above.

Answer 1

首先，您的自定义助手没有上下文，这只不过是随助手名称传入的上下文对象

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

因此默认情况下context参数将是options

上下文是传递给助手的上下文

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

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

并且没有名为 list 的 key 来保存 sub 属性

{{#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]));
}

<强> Check Fiddle

更新

那么在这种情况下，您首先就不需要模板助手。只需使用 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>

<强> Check Fiddle