一度dom-repeatのレンダリングが完了したらメソッドを実行する

Question

dom-repeat要素がレコードを表示していて、dom-repeatが1回実行されたい場合が完了したです。

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

（これは、チャットシステムです、最後の1までスクロールしない愚かなことでしょう）：私は実行できるようにするためです。

これはかなり一般的なドンリピートテンプレートです...私は自分自身をフィルタリングしたり、データを観察したりしましたが、すべてと呼ばれてからレンダリングが行われました。

ここに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

次はthisがあなたの高分子オブジェクトであるPolymer.RenderStatus.afterNextRender(this, function() {...})を使用し、レンダリング後に1回のコールバックを登録するには。

例：

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

codepen

方法が現在（でもそのsource codeで）1.1で文書化されていませんが、あなたはCallbacks contracts have changedで2.0アップグレードガイドでそれに気づくでしょう：

Polymer.RenderStatus.afterNextRender関数を使用すると、次のレンダリング後にワンタイムコールバックを登録できます。

Google I/O 2016 Practical lessons from a year of building web componentsで初めて検出されました。