Question

我正在实现搜索列表元素，但是我无法显示搜索结果的当前计数。它始终显示我上一步的结果。有没有办法在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>

Answer 1

当所有自定义元素都加载到页面上时，Polymer会触发

polymer-ready事件。

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

// in you main html page
window.addEventListener('polymer-ready', function(e){

// rest of your code

});

Answer 2

看起来你有竞争条件。在您查询计数时，DOM尚未更新。这是Polymer中的常见问题，这就是我们the job method的原因。它会自动为您辩护并保留您的范围。非常方便！尝试这样的事情：

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

渲染Polymer元素后如何触发事件？

2 个答案: