Рендеринг таблицы JsViews/JsRender с атрибутом/свойством GroupBy

Я использую 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


javascript jsrender jsviews
person OreoFanatics    schedule 22.09.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

JsRender/JsViews {{for}} и {{props}} имеют встроенную поддержку сортировки, фильтрации и т. д., но не имеют встроенной функции groupBy особенность. Но вы можете довольно легко создать его, следуя тем же методам, что и сетка с образцом ~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/

person BorisMoore    schedule 24.09.2020
comment
благодарю вас. Хотя можете объяснить, в чем разница между this.data и this.parent.data? - person OreoFanatics; 28.09.2020
comment
С ~groupBy("Name", "Amount") указатель this является представлением. См. jsviews.com/#viewobject@access. Здесь мы находимся в цикле {{for}}, поэтому this — это представление элемента, а this.data — элемент. this.parent — это родительское представление (здесь — представление массива), а this.parent.data — массив элементов. См. jsviews.com/#views, чтобы понять иерархию представлений. - person BorisMoore; 28.09.2020