Question

我想基于使用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 }...

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

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

我想要做的是找到根据类别划分列表的最简单方法，所以我最终会得到类似的东西......

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

如果我只能使用模板执行此操作，那将是完美的，但我也可以根据需要更改编译模板的JS。如果这是一个更好的解决方案，我也愿意使用EJS模板。我已经想到了几个解决方案，但是看起来都非常复杂并且工作得不好，但这肯定是一个非常普遍的问题，必须有很好的解决方案。

非常感谢。

Answer 1

当我解决这样的问题时，我倾向于通过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

Handlebars JS（或EJS）模板：将列表分为不同的类别

1 个答案: