rails AJAX js.erb相同路由更多动作

Question

我有带引导标签的rails4应用。我有所有标签的根/common_medias，并在用户点击给定标签时为每个标签加载带有AJAX + format.js + js.erb的数据。我的问题是我还想在will_pagination gem的帮助下进行无限滚动，但是js.erb文件已经用于加载初始数据。目前bootstarp tab js action和will_pagination js action都指向同一个url，所以两者都尝试使用相同的js.erb，这会导致一些问题。

什么是好的解决方法？创建一个新的控制器动作，这样就会有分开的js.erb文件（由于分页和原始数据将被分开，这个文件似乎很奇怪）。或者我应该在单个js.erb文件中使用条件来检查触发器操作是什么（在选项卡单击/滚动上加载数据）。我不知道如何实现其中的任何一个，所以请提供一些基于我的首选方法的代码。

common_medias.html.erb

  <div>
    <ul class="nav nav-tabs" role="tablist">
      <li role="presentation" class="active"><a href="#filestab" aria-controls="filestab" role="tab" data-toggle="tab" data-link = "<%= common_medias_user_common_medias_path(@user)%>" data-activetab="file">Files</a></li>
      <li role="presentation"><a href="#linkstab" aria-controls="linkstab" role="tab" data-toggle="tab" data-link = "<%= common_medias_user_common_medias_path(@user)%>" data-activetab="link">Links</a></li>
      <li role="presentation"><a href="#calendarstab" aria-controls="calendarstab" role="tab" data-toggle="tab" data-link = "<%= common_medias_user_common_medias_path(@user)%>" data-activetab="calendar">Calendar</a></li>
    </ul>
    <div class="tab-content">
      <div role="tabpanel" class="tab-pane active" id="filestab">
        <%= render partial: "common_medias/message_file" %>
      </div>
      <div role="tabpanel" class="tab-pane" id="linkstab">
        #LOADED BY JS ON TABCLICK    
      </div>
      <div role="tabpanel" class="tab-pane" id="calendarstab">
        ...
      </div>
    </div>
  </div>

common_medias控制器

 def common_medias
    @param_id = request.parameters['user_id']
    @user = User.find(@param_id)
    @conversation ||= Conversation.between(current_user.id, @user.id).first
    @common_files = @conversation.messages.with_file.order(created_at: :desc).paginate(page: params[:files], per_page: 3)
    if params[:tab] == "file"
      @common_files = @conversation.messages.with_file.order(created_at: :desc).paginate(page: params[:files], per_page: 3)
    end
    #messages can have multiple links, but with the following each link can be displayed separately with files
    if params[:tab] == "link"
      @message_links_pre = @conversation.messages.with_link.order(created_at: :desc).paginate(page: params[:links], per_page: 3)
      @message_links = @message_links_pre.map { |f| { link: f.link, created_at: f.created_at, user_id: f.user_id} }.flatten
      @common_links = formatting_links(@message_links)
    end
    if params[:tab] == "calendar"
      #implementing later
    end 
    respond_to do |format|
      format.html
      format.js
    end
  end

common_medias.js

$(document).on("page:change", function() {

//infinite scrolling for tasks based on pagination gem
    if ($('#infinite-common-file-scrolling').size() > 0) {
    $(window).on('scroll', function() {
      $('#infinite-common-file-scrolling').hide();
      var more_common_files_url;
      more_common_files_url = $('#infinite-common-file-scrolling .pagination .next_page a').attr('href');
      if (more_common_files_url && $(window).scrollTop() > $(document).height() - $(window).height() - 60) {
        $('.pagination').html('<img src="/assets/ajax-loader.gif" alt="Loading..." title="Loading..." />');
        $('#infinite-common-file-scrolling').show();
        $.getScript(more_common_files_url);
      }
    });
  };

  if ($('#infinite-common-link-scrolling').size() > 0) {
    $(window).on('scroll', function() {
      $('#infinite-common-link-scrolling').hide();
      var more_common_links_url;
      more_common_links_url = $('#infinite-common-link-scrolling .pagination .next_page a').attr('href');
      if (more_common_links_url && $(window).scrollTop() > $(document).height() - $(window).height() - 60) {
        $('.pagination').html('<img src="/assets/ajax-loader.gif" alt="Loading..." title="Loading..." />');
        $('#infinite-common-link-scrolling').show();
        $.getScript(more_common_links_url);
      }
    });
  };
});

$(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
  var target = $(this).data("activetab");
  var href = $(this).data("link");
  $.ajax({
    type: "GET",
    url: href,
    data: {tab: target},
    dataType: "script"
  });
});

common_medias.js.erb

//tabclick code
<% if params[:tab] == "file" %>
    var filebody = $('.tab-pane.active');
    filebody.html('<%= j render partial: "common_medias/message_file" %>');
<% elsif params[:tab] == "link" %>
    var linkbody= $('.tab-pane.active');
    linkbody.html('<%= j render partial: "common_medias/message_link" %>');
<% end %>

//CODE SHOULD RECOGNIZE WHICH ONE TO INVOKE  
//pagination code for files
$('.tab-pane.active').append;
<% if @common_files.next_page %>
  $('#infinite-common-file-scrolling .pagination').replaceWith('<%= j will_paginate @common_files %>');
<% else %>
  $(window).off('scroll');
  $('#infinite-common-file-scrolling .pagination').remove();
  $('.no-more').delay(1000).fadeIn(1500);
<% end %>

//pagination code for links
$('.tab-pane.active').append;
<% if @message_links_pre.next_page %>
  $('#infinite-common-link-scrolling .pagination').replaceWith('<%= j will_paginate @message_links_pre %>');
<% else %>
  $(window).off('scroll');
  $('#infinite-common-link-scrolling .pagination').remove();
  $('.no-more').delay(1000).fadeIn(1500);
<% end %>

更新

更改标签效果很好（转到/ get_links，获取数据并呈现get_links.js.erb）。 Will_paginate gem在DOM（/ get_links）中显示正确的URL，但在滚动时，将呈现common_media.js.erb而不是get_links.js.erb。

common_medias控制器

def common_medias
    @messages = @conversation.messages.includes(:user).order(created_at: :desc).limit(50).reverse
    @message = Message.new
    @common_files = @conversation.messages.with_file.order(created_at: :desc).paginate(page: params[:files], per_page: 3)
    # respond_to do |format| COMMENTED OUT STILL PAGINATION GOES FOR common_medias.js.erb
    #   format.html
    #   format.js
    # end
  end

def get_links
  @message_links_pre = @conversation.messages.with_link.order(created_at: :desc).paginate(page: params[:links], per_page: 3)
  @message_links = @message_links_pre.map { |f| { link: f.link, created_at: f.created_at, user_id: f.user_id} }.flatten
  @common_links = formatting_links(@message_links)
  respond_to :js
end

common_medias.html.erb

<ul class="nav nav-tabs" role="tablist">
      <li role="presentation" class="active"><a href="#filestab" aria-controls="filestab" role="tab" data-toggle="tab" data-link = "<%= get_files_user_common_medias_path(@user)%>" data-activetab="file">Files</a></li>
      <li role="presentation"><a href="#linkstab" aria-controls="linkstab" role="tab" data-toggle="tab" data-link = "<%= get_links_user_common_medias_path(@user)%>" data-activetab="link">Links</a></li>
      <li role="presentation"><a href="#calendarstab" aria-controls="calendarstab" role="tab" data-toggle="tab" data-link = "<%= common_medias_user_common_medias_path(@user)%>" data-activetab="calendar">Calendar</a></li>
    </ul>

common_media.js

if ($('#infinite-common-link-scrolling').size() > 0) {
  $(window).on('scroll', function() {
    $('#infinite-common-link-scrolling').hide();
    var more_common_links_url;
    more_common_links_url = $('#infinite-common-link-scrolling .pagination .next_page a').attr('href'); //SHOWS /get_links?will_paginate_params url here
    if (more_common_links_url && $(window).scrollTop() > $(document).height() - $(window).height() - 60) {
      $('.pagination').html('<img src="/assets/ajax-loader.gif" alt="Loading..." title="Loading..." />');
      $('#infinite-common-link-scrolling').show();
            $.ajax({
                type: "GET",
              url: more_common_links_url,
              data: {scrolling: "linkscroll"},
              dataType: "script"
            });
     }
  });
};

common_medias.js.erb

alert('whyyou');

get_links.js.erb

alert('hahalinks');
<% if params[:scrolling] == "linkscroll" %>
    $('.linkbody').append('<%= j render partial: "common_medias/message_link" %>');
    <% if @message_links_pre.next_page %>
    $('#infinite-common-link-scrolling .pagination').replaceWith('<%= j will_paginate @message_links_pre %>');
  <% else %>
    $(window).off('scroll');
    $('#infinite-common-link-scrolling .pagination').remove();
    $('.no-more').delay(1000).fadeIn(1500);
  <% end %>
<% else %>
    var linkbody= $('.tab-pane.active');
    linkbody.html('<%= j render partial: "common_medias/message_link" %>');
<% end %>