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
    });
  }
});

codepen

该方法目前未在1.x中记录（即使在其source code中），但您会在Callbacks contracts have changed的2.0升级指南中注意到它：

使用Polymer.RenderStatus.afterNextRender功能在下一次渲染后注册一次性回调。

我首先在Google I / O 2016上Practical lessons from a year of building web components发现了它。

一旦dom-repeat的渲染完成，就运行一个方法

1 个答案: