我有一个显示记录的dom-repeat元素,并且想在dom-repeat完成后运行一个操作。这样我可以运行:
this.$.content.scrollTop = this.$.content.scrollHeight;
(这是一个聊天系统,不向下滚动到最后一个很愚蠢)。
这是一个相当普通的dom-repeat模板...我试图插入自己作为它的过滤器,或者观察数据,但是在所有情况下,在渲染发生之前都会被调用。
这是dom重复-我该怎么做?
<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>
最佳答案
要在下一次渲染后注册一次回调,请使用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上首次发现它的。