如何在渲染聚合物元素后触发事件

How to trigger event after rendering Polymer element?

本文关键字：事件 元素 聚合物      更新时间：2024-05-26

我正在实现一个搜索列表元素，但在显示搜索结果的当前计数时遇到了问题。它总是显示我上一步的结果。有没有办法在DOM完成渲染后获得值（或触发事件）？

这是代码：

//main
<template>
  <items-list
    items="{{items}}"
    search="{{search}}">
  </items-list>
  count: {{count}}
</template>
<script>
  Polymer({
    searchChanged: function () {
      this.count = this.shadowRoot.querySelector('items-list').getCount();
    }
  });
</script>
//item-list
<polymer-element name="items-list" attributes="search items">
  <template>
    <template repeat="{{item in items}}">
      <item
        hidden?="{{toHide(search, item.name)}}"
        item="{{item}}">
      </item>
    </template>
  </template>
  <script>
    Polymer({
      toHide: function (search, breedName) {
        //...
      },
      getCount: function () {
        var items = this.shadowRoot.querySelectorAll('item:not([hidden])');
        return items.length;
      }
    });
  </script>
</polymer-element>
当所有自定义元素都加载到页面上时，Polymer会触发

polymer-ready事件。

您可以使用侦听此事件并做出相应的响应，如下面的示例所示。

// in you main html page
window.addEventListener('polymer-ready', function(e){
// rest of your code
});

看起来您有一个竞赛条件。到您查询计数时，DOM尚未更新。这是聚合物中的一个常见问题，这就是为什么我们有作业方法。它会自动为你解禁，并保留你的范围。很方便！试试这样的东西：

<template>
  <items-list
    items="{{items}}"
    search="{{search}}">
  </items-list>
  count: {{count}}
</template>
<script>
  Polymer({
    searchChanged: function () {
      this.job(function() {
        this.count = this.shadowRoot.querySelector('items-list').getCount();
      }, 100);
    }
  });
</script>
相关文章：