Question

我有一个类似于下面的JSON结构。

"markers": {
   "Lifestyle" : [
      {"Name1" : "Something"},
      {"Name2" : "Something"}
   ],  
   "Transport" : [
      {"Name1" : "Something"},
      {"Name2" : "Something"}
   ]

我想使用上面的JSON创建一个带嵌套列表项的菜单。

<ul id="menu">
   <li class="Lifestyle">Lifestyle
      <ul class="sub-cat">
         <li>Something</li>
         <li>Something</li>
      </ul>
   </li>
   <li class="Transport">Transport
      <ul class="sub-cat">
         <li>Something</li>
         <li>Something</li>
      </ul>
   </li>
</ul>

我尝试添加一个帮助函数来提取属性的名称，但我不知道如何添加子类别。任何建议表示赞赏。

编辑：添加了代码

Handlebars.registerHelper('getCategory',function(object) {
                var categories = [];
                for(var x in object) {
                    categories.push(x);
                }
                console.log(categories);
                return categories;
            });

这只返回类别名称。我知道我可以使用相同的帮助器返回HTML，但我不确定如何添加嵌套结构。

Answer 1

如果您要进行迭代，可以使用{{@key}}。

Answer 2

在您的情况下，帮助器将是一个迭代器¹，将对象转换为（键，值）对列表。注意帮助者必须返回HTML：

// context : object you wish to transform
// options.fn will contain the HTML block
Handlebars.registerHelper('pairs', function(context, options) {
    var cells = [], html, k;
    for (k in context) {
        if (context.hasOwnProperty(k)) {
            html = options.fn({
                key: k,
                value: context[k]
            }); 
            cells.push(html);
        }
    }
    return cells.join('');
});

你的模板看起来像这样

<ul id="menu">
   {{#pairs .}}
   <li class="{{key}}">{{key}}
      <ul class="sub-cat">
      {{#each value}}
      {{#pairs .}}
          <li>{{key}}: {{value}}</li>
      {{/pairs}}
      {{/each}}
      </ul>
   </li>
    {{/pairs}}
</ul>

嵌套级别在从数组中的基础数据转换为一对之前必须经过每个帮助程序。

最后，小提琴http://jsfiddle.net/hnrQC/可以看到此代码的实际效果。

¹请参阅Block helpers in Handlebars: simple iterators

Handlebars helper函数 - 提取属性名称

2 个答案: