如何知道iron-list何时完成了html的创建

Question

背景

我正在创建一个聚合物铁列表，并通过直接设置items属性来填充该列表，如下所示：document.getElementById('itemsList').items = data;

当用户更改类别时，我会以上述方式更改items的值(使用ajax检索)。这可以完美地工作，但我现在需要根据我的列表类别更改select中的选项。我可以使用模板来实现这一点，但它很麻烦，甚至在以后当选项需要是动态的时候也不会起作用。

我想用JavaScript简单地隐藏某些选项，但是在执行.items = data之后，我想要操作的select不会立即出现。我需要一个回调或者其他方法来检测iron-list何时完成了插入超文本标记语言。

研究

我浏览了文档，除了iron-resize之外，找不到任何对回调或事件的引用，这看起来没有什么帮助。

我可能会通过监听DOMNodeInserted事件来解决这个问题，但这可能比我已经得到的解决方案更糟糕。

setTimeout也可以工作，但也不是一个好的解决方案。

来自宫本:我可以在铁名单上检查_itemsRendered，它被设置为真，但我可能需要做setInterval来检查，也不好。

问题

是否有任何形式的回调，让我知道何时iron-list完成创建超文本标记语言？如果失败了，可能是一个事件或其他我可以用来知道它何时完成的东西？

更新：

答案似乎是dom-change事件，但现在它似乎并不总是触发。请参阅Polymer iron-list does not always fire dom-change event

Answer 1

那就像这样。computed bindings computeItems和computeOptions会随着前者的data或listCategory更改或后者的item或listCategory更改而更新它们的值。这使得聚合物可以为我们管理所有的数据绑定:你只需要提供一些函数来计算它。

<dom-module is="some-element">
<iron-list items="{{computeItems(data, listCategory)}}">
     <template>
          <select>
              <template is="dom-repeat" items="{{computeOptions(item, listCategory)}}" as="option">
                  <option value="{{option.value}}"></option>
              </template>
          </select>
     </template>
</iron-list>
</dom-module>

<script>
 Polymer({
    is: "some-element",
    properties: {
        data: Array,
        listCategory: String
    },
    computeOptions: function(item, listCategory){
        return item.options.filter(e=>e.category === listCategory)
    },
    computeItems: function(data, listCategory){ 
        return data.filter(e=>e.category === listCategory)
    }
 })
 </script>

Answer 2

我们目前正在尝试一条不同的路线，但如果其他任何人需要完成这一点，看起来dom-change事件应该会告诉您。

更新：

这并非在所有情况下都有效，请参阅Polymer iron-list does not always fire dom-change event