0

現在、次のような無限のページング設定があります。

events_controller.rb

class EventsController < ApplicationController

  respond_to :html, :js

  def index
    @events = Event.page(params[:page]).per(5)
    respond_with(@events)
  end

end

イベント/index.html.erb

<div id="events-container">
  <%= render :partial => 'events', :locals => {events: @events} %>
</div>

イベント/events.html.erb

<div id="events-table-container" data-events-url="<%= current_url %>">

  <table id="events-tbl">
    <tbody id="events-tbl-body">
      <%= render events %>
    </tbody>
  </table>

  <%= paginate events %>

</div>​

assets/javascripts/events/events_endless_paging.js

$(function() {
  var isScrolledIntoView;
  isScrolledIntoView = function(elem) {
    var docViewBottom, docViewTop, elemBottom, elemTop;
    docViewTop = $(window).scrollTop();
    docViewBottom = docViewTop + $(window).height();
    elemTop = $(elem).offset().top;
    elemBottom = elemTop + $(elem).height();

    return (elemTop >= docViewTop) && (elemTop <= docViewBottom);
  };

  if ($('#events-container .pagination').length) {
    $(window).scroll(function() {
      var url;
      url = $('#events-container .pagination .next a').attr('href');
      if (url && isScrolledIntoView('#events-container .pagination')) {
        $('#events-container .pagination').html("<span class='working-notice'>Fetching more...</span>")

        return $.getScript(url);
      }
    });

    return $(window).scroll();
  }
});

イベント/index.js.erb

$('#events-tbl-body').append('<%= j render(@events) %>');

<% if (@events.current_page < @events.num_pages) %>
    $('.pagination').replaceWith('<%= j paginate(@events) %>');
<% else %>
    $('.pagination').remove();
<% end %>

これは魅力のように機能します。この問題は、setTimeout ajax ポーリングを統合してイベント ページを更新しようとすると発生します。

assets/javascripts/events/event_poller.js

$(document).on('ready', function() {
  App.Pollers.Event.poll();
});

App.Pollers.Event = {

  frequency: 170000,

  poll: function() {
    setTimeout(App.Pollers.Event.request, App.Pollers.Event.frequency);
  },

  request: function() {
    eventsRequest = $.getScript($('#events-table-container').data('events-url'));
    return eventsRequest;
  },

};

上記のエンドレス ページング コードを削除すると、events/index.js.erb 内のコードは次のようになり、更新動作だけが適切に機能します。

イベント/index.js.erb

$('#events-container').html('<%= j(render :partial => 'events', :locals => {events: @events}, :formats => :html) %>');

App.Pollers.Event.poll();

私の課題は、エンドレス ページング コードと ajax リフレッシュ コードを連携させることです。エンドレス ページング コードで ajax リフレッシュを使用すると、最終的に発生するのは、 events-tbl-body要素に重複したイベントが追加されることです。もう 1 つの問題は、ユーザーがページを下にスクロールし、エンドレス ページングによってページ 2 の結果がページ 1 の結果に追加されたとします。この場合、ajax 更新コードはページ 1 と 2 の両方を表示する方法をどのように知るのでしょうか? これらは課題のほんの一部です。誰かがガイダンスを提供できることを願っています。これは冗長な質問であることは承知していますので、ご注意ください。

4

3 に答える 3

0

ポーラーには 2 つの異なる用途があるようですが、間違っていたら訂正してください。

  1. それらのイベントに加えられた更新 (削除を含む) を使用して、既存の既にページ上のイベントを更新します。
  2. 新しいイベントを追加します。

ポーラーを、それぞれが 1 つのアクションを担当する 2 つの異なるポーラーに分割することを強くお勧めします。

最初のものは、現在ページにあるイベントのすべてのイベント ID を取得し、それらの更新をチェックします。削除されたイベントはページから削除されます。更新されたイベントはその場で更新されます。

2 つ目は、「最後にポーリングした」タイムスタンプの後に作成されたイベントを探し、それらをページの上部に挿入します。

2 番目のポーラーがエンドレス ページのイベントのページネーションにどのように影響するかはわかりませんが、その課題は解決できると思います。

于 2013-08-22T20:06:02.427 に答える
0

私の提案は、コンテンツの古さをチェックし、特定のコンテンツ (記事、注文可能なアイテムなど) を更新する共有 AJAX メソッドを作成することです。このコードは、ページネーション コードまたは自動時間投票。

例としてのシナリオ

  1. ユーザーがページ (1/4) をロードすると、4 つの部分が含まれます。ユーザーはスクロールせず、170000 ミリ秒で 4 つの部分を更新する必要があります。更新されたタイマーは、これら 4 つの項目をループし、これら 4 つの独立した AJAX アップデーターを呼び出します。

  2. ユーザーがページ (1/4) をロードし、ページ (2/4) までスクロールします。ページネーション コードは、新しい 4 つの部分をレンダリングします。ユーザーはページを所定の位置に保持するため、170000 ミリ秒後にそれらの 4 を更新する必要があります。上記の #1 と同様に、タイマー呼び出しはアイテム 5 ~ 8 (ページ 2 のコンテンツ アイテム) をループし、それら 4 の独立したアップデーターを呼び出します。

  3. ユーザーがページ (1/4) をロードし、ページ (4/4) までスクロールします。ページネーション コードはすべての部分をレンダリングします (16 セクションのうち 16 セクション)。ユーザーはページを所定の位置に保持するため、170000 ミリ秒後にそれらの 4 を更新する必要があります。上記の #1 & 2 と同様に、タイマー呼び出しは項目 20 から 24 をループし、これら 4 の独立した更新を呼び出します。

  4. ユーザーがページ (1/4) をロードし、ページ (2/4) までスクロールしてそこから離れます。上記の #2 と同様に、4 つの項目がタイマーによって更新されます。次に、ユーザーはページ (1/4) までスクロールして戻るため、ページネーション/スクロール コードは、コンテンツを更新する必要があるかどうかを確認する小さな (250ms) タイマーを介して (1-4) の独立した関数を呼び出します。それで。

  5. ユーザーがページ (1/4) をロードし、ページ (4/4) までスクロールしてそこから離れます。#4 と同じように、最後のページでコンテンツが更新されてから上にスクロールします。スクロール イベントが発生すると、小さな (250 ミリ秒) タイマーを介して ajax アップデーターがトリガーされ、既存のアイテムを更新する必要があるかどうかが確認され、更新が必要な場合は更新が行われます。

考慮事項

  • これにより、「これは更新する必要がありますか」というロジックを、ページネーションとページを離れるユーザーの両方の動作に対応する共有関数に分割できます。
  • これにより、表示されるコンテンツのみを更新し、ロジックが 2 セットの関数で重複しないようにすることができるため、後でロジックを最小限の影響で更新できます。
  • 「スクロール」バックアップ時にページネーションコードによって呼び出されたときにこの関数のわずかな遅延があると、ユーザーが要素を非常に速くスクロールして、呼び出しを行ったり、サーバーリソースを使用してコンテンツを更新したりする価値がないというイベントが可能になります。画面にはありません。
于 2013-08-27T20:32:00.200 に答える