Patterns for collections of polymorphic objects in Polymer? - polymer

Question

Say I have two separate lists of polymorphic objects: Shape -> Circle and Shape -> Rectangle. Shape contains the properties "name" and "description", while Circle contains the properties "center" and "radius" and rectangle contains "length" and "width" properties. I'd like to have a single Polymer component, "shape-list", that would be able to handle display of either the list of Circles or list of Rectangles and display the specific properties of each type in the list.
"shape-list"'s template might look something like so:
<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>
And "shape-entry"'s template would look something like so:
<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>
Further, we would have templates for "shape-circle" and "shape-rect":
shape-circle:
<template>
Center: <span>[[shape.center]]</span>
Radius: <span>[[shape.radius]]</span>
</template>
shape-rect:
<template>
Length: <span>[[shape.length]]</span>
Width: <span>[[shape.width]]</span>
</template>
The usage would ideally be something like the following:
I can see two ways of accomplishing the above:
Not using "content" tags, but instead setting a property on the shape-list and shape-entry elements to the actual prototype object reference or name of the specific shape, then having some magic JavaScript that creates an instance of that specific shape element based on that property and manually wiring all of the data binding together. This yields additional complexity to assemble the elements and data binding.
Replicate "shape-list" and "shape-entry" into "rect-list", "circle-list" and "rect-entry", "circle-entry", and share styles and behaviors between the subtypes. This results in some code duplication.
Is there a better way of accomplishing the above? I'd (ideally) prefer an entirely declarative approach!

Answer 1

You could have a shape-list component that uses an "if" template to display the proper shape component (rect-entry, circle-entry ). Each shape entry should declare a shared behavior, e.g ShapeBehavior that has all the shared shape behavior to avoid duplicity.
.. 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>
If you want to dynamically pass the element that should be used , then a programatically solution is needed.