Groups and sections in iron list - PolymerElements/iron-list GitHub Wiki

In iron-list, we would like to think that a template defines the DOM structure for any section of items. For example, given a collection of different types of items, iron-list can provide a mechanism to define which template should render that item. All the template instances should be recycled by keeping a pool per every template type.

The advantage of this approach is that we could maintain the virtual list property among these features. We can also abstract out the algorithms and make every input (item, template) go through the same code path.

From an API design point of view, iron-list doesn't support multiple templates. The only workaround is to add dom-if sub-templates and bind them to a function that can determinate if that sub-template should be used to render an item. Of course, these template instances will not be fully recycled since in the worst case scenario the sub-templates will be swapped every time a new item instance is assigned. The fact is that as today, iron-list only has notion of a single type of template.

1. Non-breaking change

The user adds dom-if sub-templates to the main template.

<iron-list select-template="selectTemplate">
  <template>
    <template is="dom-if" if="[[shouldRenderA(item)]]">
      <div>Render A</div>
    </template>
    <template is="dom-if" if="[[shouldRenderB(item)]]">
      <div>Render B</div>
    </template>
  </template>
</iron-list>

Notice the new select-template attribute. This will be a function defined in current scope such that it could return a key that identifies the template instance.

  selectTemplate: function(item) {
    if (shouldRenderA(item))
      return 'a';
    if (shouldRenderB(item))
      return 'b';
  }

// also
   shouldRenderA: function(item) {
     // return item instanceOf SomeItemClass
     return item.hasOwnProperty('name');
   }

   shouldRenderB: function(item) {
     // return item instanceOf SomeGroupClass
     return item.hasOwnProperty('group');
   }

2. Breaking change

@kevinpschaaf proposed an idea that could also solve this problem: https://github.com/PolymerElements/iron-list/issues/109#issuecomment-144518737

In this case, iron-list would become a wrapper and templates would be put inside.

<iron-list select-template="selectTemplate">
  <template is="iron-list-template" id="a">
    <div>Render A</div>
  </template>
  <template is="iron-list-template" id="b">
    <div>Render B</div>
  </template>
</iron-list>

  selectTemplate: function(item) {
    if (item.hasOwnProperty('name'))
      return 'a';
    if (item.hasOwnProperty('group'))
      return 'b';
  }

The main difference of this approach is that iron-list could map the return value of selectTemplate to a template id.