聚合物模板重复组答案

【问题标题】：Polymer template repeat group聚合物模板重复组
【发布时间】：2014-10-23 20:32:56
【问题描述】：

有没有办法在聚合物重复模板中进行分组？我有一个带有 doc.name 和 doc.manualType 的项目列表，但我想对一个项目列表进行分组，因此 manualType 每个组只显示一次，而不是每个项目显示一次。

或者我如何更新我的绑定以具有previousManualType，以便我只能显示与以前的manualType不同的manualType。

<template id="docListTemplate" bind="{{searchResults}}">
   <div class="vGroup">
      <core-selector id="selector" class="list" multi selected="{{multiSelected}}">
         <template repeat="{{doc, i in data}}" {previousManualType:''}>
            <template if="{{doc.manualType!=previousManualType}}">
               <h1>{{doc.manualType}}</h1>
            </template>
            <div class="cb item">
                {{doc.name}}
            </div>
         </template>
      </core-selector>
   </div>
</template>

【问题讨论】：

我无法更改数据结构，因为我从 JSON Web 服务中提取数据。有没有办法使用计算属性更新 previousManualType？
Polymer 0.5.1 在 core-list 上添加了实验分组，但它仍然需要首先正确设置数据结构。 polymer-project.org/docs/elements/core-elements.html#core-list

标签： templates polymer repeat web-component

【解决方案1】：

怎么样

<template id="docListTemplate" bind="{{searchResults}}">
   <div class="vGroup">
      <core-selector id="selector" class="list" multi selected="{{multiSelected}}">
         <template repeat="{{manualType in ManualTypes}}">
            <template repeat="{{doc, i in manualType.data}}">
              <h1>{{doc.manualType}}</h1>

              <div class="cb item">
                {{doc.name}}
            </div>
         </template>
      </core-selector>
   </div>
</template>

您需要相应地准备数据结构。

【讨论】：

【解决方案2】：

正如 Gunter 所指出的，数据结构似乎是关键点。如果您无法控制输入，则需要对其进行转换。您可以使用下划线 / lodash 到 groupBy

http://underscorejs.org/#groupBy

https://lodash.com/docs#groupBy

【讨论】：