ember.jsはルートの更新後にチャットボックスの一番下までスクロールします

Question

私はメッセージングのような電子メールでemberアプリケーションを構築しています。

ユーザーがメッセージを送信するとき、コンテナは をスクロールして新しいメッセージを表示する必要があります。新しいメッセージを作成するアクションは次のとおりです

createMessage(messageParams) { 
    this.get('store').createRecord('message', messageParams).save() 
    .then(() => { 
     return this.refresh() 
    }) 
    .then(() => { 
     let objDiv = document.getElementById("message-container"); 
     objDiv.scrollTop = objDiv.scrollHeight; 
    }) 
    .catch(() => { 
     this.get('flashMessages') 
     .danger('There was a problem. Please try again.'); 
    }); 

今のところ、チャットボックスは新しいメッセージがコンテナに表示されたときに下部にスクロールしません。 2番目のコード.thenを設定タイムアウトでラップすると動作します。

コンテナをルートファイル内の他の場所の下にスクロールするコードを置く必要がありますか？ AfterModelフックに入れてみました。モデルフックの後に.thenに入れてみました。私がそれをしたとき、私は空の白いページを持っています。

model(params) { 
    return Ember.RSVP.hash({ 
     messages: this.get('store').query('message', { 
     id: params.conversation_id 
     }), 
     conversation: this.get('store').find('conversation', params.conversation_id) 
    }).then(() => { 
     let objDiv = document.getElementById("message-container"); 
     objDiv.scrollTop = objDiv.scrollHeight; 
    }); 
    } 

Answer 1

didTransitionフックでは、実行ループafterRenderキューでDOMコードを実行できます。

didTransition() { 
    Ember.run.later('afterRender',() => { 
    let objDiv = document.getElementById("message-container"); 
    objDiv.scrollTop = objDiv.scrollHeight; 
    }, 100); 
    return true; 
}, 

DOM操作コードは、私はあなたがメッセージを表示するためのコンポーネントを書き込むと、コンポーネントのライフサイクルフックメソッド（つまり、あなたのケースでdidRenderがベストフィットだろう）