JsViews / JsRender 使用 GroupBy 属性/属性渲染表格

Question

我正在使用 JsViews 来设计一个模板。 但是我想知道我们是否可以根据其字符串值对属性进行分组？

JSON 示例：

"ItemDetails": [
    {
        "Amount": 2000,
        "Name": "Horror Book",
    },
    {
        "Amount": 3500,
        "Name": "Horror Book",
    },
    {
        "Amount": 1000,
        "Name": "Children Book",
    },
],

当前代码正在概述每个项目，即使它具有相同的名称。

{{for ItemDetails}}
{{if Amount}}
            <row>
                <col>{{>Name}}</col>
                <col>{{>Amount}}</col>
            </row>
{{/if}}
{{/for}}

我希望它有这样的结果：

恐怖书 5500

儿童读物 1000

Answer 1

JsRender/JsViews {{for}} 和 {{props}} 标签内置支持排序、过滤等，但没有内置 groupBy 功能。但是您可以按照与grid with ~total() 示例类似的技术轻松创建一个。

这是一种使用辅助函数的方法：

<table><tbody>
  {{for ItemDetails sort="Name"}}
    {{if ~groupBy("Name", "Amount")}}
      <tr>
        <td>{{>Name}}</td>
        <td>{{>~total()}}</td>
      </tr>
    {{/if}}
  {{/for}}
</tbody></table>

https://jsfiddle.net/BorisMoore/nx3atd1q/

这是一个使用过滤器功能的替代版本{{for}}：

<table><tbody>
  {{for ItemDetails sort="Name" filter=~groupBy groupTotal="Amount"}}
    <tr>
      <td>{{>Name}}</td>
      <td>{{:~total()}}</td>
    </tr>
  {{/for}}
</tbody></table>

https://jsfiddle.net/BorisMoore/o4pt3brq/