如何在 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？

我知道在 polymer 1 中，最佳做法是绑定到 on attached 并等待 dom-repeat event with a debouncer 然而，这在 polymer 3 中不再有效。

Answer 1

如果您知道索引号，您可以使用 ;

访问该元素

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

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

编辑

为了显示在所选项目之上；

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

Demo

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

How to access elements within dom-repeat in Polymer 3.0?

polymer

polymer-3.x

dom-repeat