背景

Question

背景

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

当用户更改类别时，我以上述方式更改items的值（使用ajax检索）。这很有效，但我现在需要根据列表类别更改select中的选项。我能够使用模板来做到这一点，但它很麻烦，甚至可能在以后选项需要动态时才能工作。

我想简单地用JavaScript隐藏某些选项，但我想要操作的select在执行.items = data后不会立即出现。我需要一个回调或其他方法来检测何时插入HTML iron-list。

研究

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

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

setTimeout也可以，但也是一个糟糕的解决方案。

来自miyamoto：我可以在铁列表上检查_itemsRendered哪个设置为true，但我可能需要setInterval来检查，也不好。

问题

在iron-list创建HTML时，是否有任何回调让我知道？如果失败那可能是事件或其他什么我可以用来知道什么时候完成？

更新

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

Answer 1

那样的东西。 computed bindings computeItems和computeOptions将其值更新为data或listCategory更改为前者，或item或listCategory后者改变了。这允许聚合物为我们管理所有数据绑定：您只需提供一些函数来计算它。

NB ：在定义所有相关属性（即未定义）之前，不会调用计算函数。

<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

如何知道铁列表何时完成创建html

背景

研究

问题

更新

2 个答案:

更新