0

我有一个类似于下面的 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，但我不确定如何添加嵌套结构。

4

2 回答 2

3

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

于 2014-03-14T00:47:37.163 回答
2

在您的情况下，助手将是一个迭代器1将对象转换为 (key, value) 对的列表。请注意，助手必须返回 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>

由于数组中的基础数据，嵌套级别必须经过一个 each 助手，然后才能转换为一对。

最后，使用 Fiddle http://jsfiddle.net/hnrQC/来查看此代码的运行情况。

1请参阅Handlebars 中的块助手：简单的迭代器

于 2013-02-16T16:44:17.583 回答