我有一个显示记录的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上首次发现它的。

07-24 09:38
查看更多