Polymer 聚合物中多态对象集合的模式？

假设我有两个单独的多态对象列表：形状->圆形和形状->矩形。形状包含属性“名称”和“描述”，圆形包含属性“中心”和“半径”，矩形包含属性“长度”和“宽度”。我希望有一个单一的聚合物组件，“形状列表”，它能够处理圆形列表或矩形列表的显示，并显示列表中每种类型的特定属性

“形状列表”的模板可能如下所示：

<template>
  <ul>
    <template is="dom-repeat" items="[[shapes]]" as="shape">
      <li>
        <shape-entry shape="[[shape]]">
          <!-- The user of shape-list knows whether we want to display
               Rectangles or Circles.  We want to customize the display
               of each shape-entry with information specific to each
               shape by using some sort of prototype element supplied
               to the shape-list tag. -->
          <content select="..."></content>
        </shape-entry>
      </li>
    </template>
  </ul>
</template>

<template>
  Name: <span>[[shape.name]]</span>
  Description: <span>[[shape.description]]</span>
  <!-- Ideally we would take the passed-in prototype element and
       stamp it out here. -->
  <content select="...?"></content>
</template>

“shape entry”的模板如下所示：

<template>
  <ul>
    <template is="dom-repeat" items="[[shapes]]" as="shape">
      <li>
        <shape-entry shape="[[shape]]">
          <!-- The user of shape-list knows whether we want to display
               Rectangles or Circles.  We want to customize the display
               of each shape-entry with information specific to each
               shape by using some sort of prototype element supplied
               to the shape-list tag. -->
          <content select="..."></content>
        </shape-entry>
      </li>
    </template>
  </ul>
</template>

<template>
  Name: <span>[[shape.name]]</span>
  Description: <span>[[shape.description]]</span>
  <!-- Ideally we would take the passed-in prototype element and
       stamp it out here. -->
  <content select="...?"></content>
</template>

名称：[[shape.Name]]
描述：[[shape.Description]]

此外，我们还将为“shape circle”和“shape rect”提供模板：

形状圆：

<template>
  Center: <span>[[shape.center]]</span>
  Radius: <span>[[shape.radius]]</span>
</template>

中心：[[shape.Center]]
半径：[[shape.Radius]]

形状矩形：

<template>
  Length: <span>[[shape.length]]</span>
  Width: <span>[[shape.width]]</span>
</template>

长度：[[shape.Length]]
宽度：[[shape.Width]]

理想情况下，用法如下所示：

我可以看到实现上述目标的两种方法：

不使用“内容”标记，而是将形状列表和形状输入元素上的属性设置为实际原型对象引用或特定形状的名称，然后使用一些神奇的JavaScript基于该属性创建特定形状元素的实例，并手动将所有数据绑定连接在一起。这增加了组装元素和数据绑定的复杂性

将“形状列表”和“形状条目”复制到“矩形列表”、“圆形列表”和“矩形条目”、“圆形条目”中，并在子类型之间共享样式和行为。这会导致一些代码重复

---

有没有更好的方法来实现上述目标？我（理想地）更喜欢完全声明式的方法

您可以拥有一个形状列表组件，该组件使用“如果”模板来显示正确的形状组件（矩形条目、圆形条目）。每个形状条目都应该声明一个共享行为，例如ShapeBehavior，它具有所有共享形状行为以避免重复

.. inside the dom-repeat
  <template is="dom-if" if="{{_isRect(item)}}" >
    <rect-entry shape={{item}} ></rect-entry>
  </template>
  <template is="dom-if" if="{{_isCircle(item)}}" >
    <circle-entry shape={{item}} ></circle-entry>
  </template>

。。在dom内部重复

---

如果您想动态地传递应该使用的元素，那么需要一个编程解决方案。

Aha，运行时类型信息，我觉得自己没有考虑这一点很愚蠢。我想这会管用的。给我一两天时间试一下，然后我会把答案标为正确，或者继续讨论。效果很好。事实上，由于我有多个具有同质组件的列表，我实际上可以在自定义元素本身上设置类型，并传递类型。从聚合物体系结构的角度来看，最好有一个更动态的选择机制——例如，根据绑定数据自动加载组件的正确实例——但我认为这是目前我们能做的最好的选择。谢谢