Полимер 1,0 dom-repeat с вложенными элементами

Question

У меня есть вопрос относительно dom-repeat. У меня есть два различных элементов, таких как:

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

item-element каждый имеет массив, в котором элементы могут быть добавлены во время выполнения. Когда присоединяется , происходит событие, так что host-element знает об item-element в своем содержании и добавляет каждый item-element к массиву от item-element s к свойству. Чтобы получить доступ к item-element записи массивов можно привязать к свойству из host-element как:

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

печатать содержание itemElements итерации над ним с dom-repeat

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

до сих пор все работает, как ожидалось , Когда item-element изменится, dom-repeat должен перерисовать себя, но этого не происходит. В documentation указано, что вы можете использовать dom-repeat.observe или dom-repeat.render
, чтобы обновить элемент dom-repeat. Использование dom-repeat.render вручную работает и может быть запускается автоматически, но не является идеальным. Поэтому я пытаюсь найти решение с dom-repeat.observe, которому пока не повезло.

<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> 

Я толкнул мой источник в GitHub на source и через live demo

Спасибо за вашу помощь. Sandro

Answer 1

Я нашел хак, чтобы заставить его работать. Мне нужно изменить массив, содержащий все элементы. Функция _itemElementChanged вызывается каждый раз, когда изменяется item-element.

_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})); 
     } 
} 

Проверка на this.items.length > 0 в это нужно упаковывают _itemElementChanged вызывается дважды перед запуском функции асинхронной. В этом случае this.items закончится пустым.

Это по тарифу не удовлетворительное решение, но его единственное, что я нашел до сих пор. Я обновил источник, включив решение.