私の問題は、ナビゲーション リンク/エンドレス スクロールに関係しています。
各マイクロポストに「削除」ボタンを追加しました。そのボタンが押されると、サーバーへの ajax 呼び出しが行われ、マイクロポストが削除され、div が DOM から削除されます。
最初のページにマイクロポスト 1 から 10、2 番目にマイクロポスト 11 から 20 などがあるとします。最初のページの項目 1、2、3 を削除するとします。次に、下にスクロールします。サーバーはマイクロポストを「再計算」します。前のリストの 3 つを削除したので、アイテム 13 から 22 が返されます。つまり、マイクロポスト 10、11、12 は最初のページにも 2 番目のページにも表示されません。
stackoverflow を探し回った後、解決策を見つけました。
リストからマイクロポストを削除するときはいつでも、ページの最後のマイクロポストの直後にあるマイクロポストを読み込み、一番下に挿入します。
私が現在どのように修正を行っているか:
デフォルトでは、will_paginate gem を使用して 1 ページに 10 個のマイクロポストを表示します。いつでも表示されるマイクロポストの ID を知る必要があります。これは、各マイクロポストを保持するコンテナーの開始 div タグに格納することで実現します。
<% @microposts.each do |m| %>
<div class="postHolder" data-micropost-id="<%= m.id %>">
microposts.js アセット ファイルで次のようにアクセスします。
$(function() {
$('.message_delete').on('ajax:success', function(event, data, status, xhr){
console.log(data); //to check if json is working
console.log($('.postHolder').last().data('micropost-id'));
});
});
これが私のコントローラーの破棄アクションです。
def destroy
micropost = Micropost.find(params[:id])
respond_to do |format|
micropost.destroy
format.json { render :json => micropost } #just to check if json is working
end
end
これで、各マイクロポストの ID がわかったので、1 つが削除されたら、jquery セレクターを使用して、ページの最後の .postHolder div を細かく指定し、その ID を使用して、その後に続くマイクロポストを取得し、そのマイクロポストをその後に挿入します。 . このようにして、メッセージが削除されると、メッセージが自動的に追加されます。
ユーザーがたまたまスクロールしてさらにメッセージをロードした場合、欠落しているものはありません。私はいくつかのRailscastを見て、Ryan Batesがデータ属性を使用して同様のことを行っているのを見て、それらについていくつか読んだところ、これは悪い習慣であるという印象を受けたようです.
私はこれを行う他の方法を考え出そうとしましたが、何も思いつきませんが、この方法で行うのは少し奇妙に感じます. たぶんそれはすべて私の頭の中ですが、可能であれば別のより良い解決策が欲しいです。
ありがとう
敬具