Polymer 1.0 dom-repeat with nested elements

Question

I have a question regarding dom-repeat. I have two different elements like:

<host-element>
    <item-element></item-element>
    <item-element></item-element>
</host-element>

each item-element has an array, in which items can be added at runtime. When the item-element is attached is fires an event, so that the host-element knows about the item-element within its content and adds each item-element to an array of item-elements to a property. To access the item-element item arrays you could bind to the property of the host-element like:

<host-element items="{{itemElements}}">
    <item-element></item-element>
    <item-element></item-element>
</host-element>

to print the content of the itemElements iterate over it with dom-repeat

<template is="dom-repeat" items="{{itemElements}}">
    <ul>
        <template is="dom-repeat" items="{{item.values}}" as="value">
            <li>[[value]]</li>
        </template>
    <ul>
</template>

so far everything works as expected. When the item-element change the dom-repeat should redraw itself, but it is not happening. The documentation states you could uses dom-repeat.observe or dom-repeat.render
to update the dom-repeat element. Using dom-repeat.render manually works and could be run automatically, but is not ideal. Therefor I am trying to find a solution with dom-repeat.observe with no luck so far.

<template is="dom-repeat" items="{{itemElements}}" observe="values.splice">
    <ul>
        <template is="dom-repeat" items="{{item.values}}" as="value" observe="????">
            <li>[[value]]</li>
        </template>
    <ul>
</template>

I have pushed my source to github at source and a live demo

Thanks for your help. Sandro

From my understanding of the documentation you only need to add the observed property to the first observe attribute: observe="values.splice value.myotherproperty" — Kjell

synk synk · Accepted Answer · 2015-08-26T12:05:56

I have found a hack to get it to work. I need to alter the array holding all items. The function _itemElementChanged is called every time a item-element is changed.

_itemElementChanged: function(){
      // the check is needed if this function is run multiple times in the same tick it would erase the whole array
      if (this.items.length > 0){
        var itemsTmp = this.items;
        this.items = [];
        this.async(function () {
          this.self.items = this.items;
        }.bind({items: itemsTmp, self: this}));
      }
}

The check for of this.items.length > 0 is need incase _itemElementChanged is called twice before the async function runs. In that case this.items would end up empty.

This is by fare not a satisfying solution, but its the only working on I found so far.. I have updated the source to include the solution.

Polymer 1.0 dom-repeat with nested elements

1 Answers