dom-repeat 渲染完成后运行一个方法

Question

我有一个显示记录的 dom-repeat 元素，我想在 dom-repeat完成后运行一个操作。这样我就可以运行：

    this.$.content.scrollTop = this.$.content.scrollHeight;

（这是一个聊天系统，不向下滚动到最后一个是愚蠢的）。

这是一个相当普通的 dom-repeat 模板......我尝试将自己作为它的过滤器，或者观察数据，但在所有情况下，我在渲染发生之前被调用。

这是 dom-repeat —— 我该怎么做？

    <div class="content" id="content">
      <div class="container-fluid">
        <template is="dom-if" if="[[!_dataThere(data)]]">
          <my-empty-list icon="question-answer" message="You haven't talk to this user yet. (You can do it now!)"></my-empty-list>
        </template>

        <hot-network manage-errors>
          <iron-ajax id="aj" auto url="{{_makeUrl(userId,userData.generic.id)}}" handle-as="json" last-response="{{data}}"></iron-ajax>
          <template is="dom-if" if="[[_dataThere(data)]]">

            <template is="dom-repeat" items="[[data]]">

              <div class$="message {{_theirsOrMine(item)}}">
                <div class="message-inner">
                  <div class="avatar"></div>
                  <div class="bubble">{{ item.message}}</div>
                </div>
                <div class="meta">{{_formattedDate(item.added)}}</div>
              </div>

            </template>

          </template>
        </hot-network>
      </div>
    </div>

Answer 1

要在下一次渲染后注册一次性回调，请使用Polymer.RenderStatus.afterNextRender(this, function() {...})，this您的 Polymer 对象在哪里。

例子：

Polymer({
  _addItem: function() {
    this.push('items', new Item());
    Polymer.RenderStatus.afterNextRender(this, () => {
      // set scroll top
    });
  }
});

代码笔

该方法目前在 1.x 中未记录（甚至在其源代码中），但您会在回调合同的 2.0 升级指南中注意到它已更改：

使用该Polymer.RenderStatus.afterNextRender函数在下一次渲染后注册一次性回调。

我第一次发现它是在 Google I/O 2016一年构建 web 组件的实践经验。