polymer - 如何在 Polymer 3.0 中访问 dom-repeat 中的元素？

Question

我有以下代码：

<dom-repeat id="template" items="{{chats}}">
    <template>
      <template is="dom-if" if="[[item.opened]]">
        <section id$="msg-[[index]]"></section>
      </template>
    </template>
</dom-repeat>

如何访问 id=msg-3 的部分并在呈现时将 scrollTop 设置为 999？

我知道在聚合物 1 中，最佳实践是绑定到附加并等待带有去抖动器的 dom-repeat 事件，但是这在聚合物 3 中不再起作用。

Answer 1

如果您知道索引号，则可以使用 ; 访问该元素

let el = this.shadowRoot.querySelector('#msg-'+<index>);

请记住，如果由于您的过滤器而未呈现项目，则 dom-if您无法访问此元素。

编辑

为了显示在所选项目的顶部；

let screenPosition = el.getBoundingClientRect();
window.scrollTo(screenPosition);

演示