0

我想使用 Handlebars JS 基于对象数组创建一个无序列表。

对象采用以下形式：

{ name: 'NameOne', id: 001, category: 2 }, { name: 'NameTwo', id: 002, category: 1 }, { name: 'Name Three', id: 003, category: 1 }, { name: 'Name Four', id: 004, category: 3 }...

目前我有一个带有 each 函数的模板，它编译一个 UL，每个对象创建一个新的列表项，如下所示：

{{#each this}}
    <li>{{ name }}</li>
{{/each}}

我想做的是找到根据类别划分列表的最简单方法，所以我最终可能会得到这样的结果......

Category 1
    NameTwo
    NameThree
Category 2
    Name One
Category 3
   Name Four

如果我只能使用模板来做到这一点，那将是完美的，但如果需要，我也可以更改编译模板的 JS。如果这是一个更好的解决方案，我也愿意使用 EJS 模板。我已经想到了几个解决方案，但似乎都过于复杂并且效果不佳，但这肯定是一个相当普遍的问题，必须有好的解决方案。

非常感谢。

4

1 回答 1

2

嗨，当我解决这样的问题时，我倾向于通过 JavaScript 操作数据以保持模板清洁。

尝试这样的事情怎么样：

HTML

{{#each list}} 
  <ul>
      <li>
          Category {{@key}}
          <ul>
              {{#each this}}
                  <li>{{name}}</li>
              {{/each}}
          </ul>
      </li> 
  </ul>     
{{/each}}

JS

var rawData = [
    { name: 'NameOne', id: 001, category: 2 }, 
    { name: 'NameTwo', id: 002, category: 1 }, 
    { name: 'Name Three', id: 003, category: 1 }, 
    { name: 'Name Four', id: 004, category: 3 }
]; 

var data = {
    list:{

          }
};

for (var i = 0; i < rawData.length ; i++) {

    var a = rawData[i];
    var cat = a.category;

    if(typeof data['list'][cat] === 'undefined'){
        data['list'][cat] = [];
    }
    data['list'][cat].push(a);
 }

这里还有一个jsfiddle

于 2014-10-21T12:06:48.680 回答