javascript - 当所有项目都已在 Ruby on Rails 中呈现时，隐藏“加载更多”按钮

Question

我目前正在尝试在 Ruby on Rails 中实现“加载更多”按钮。我已经成功地实现了它。但是，即使没有更多照片需要渲染，“加载更多”按钮仍然会出现。

以下是代码列表:索引.html.erb

<div class = 'container'>
        <div class = 'section-header'>
            <h2> Let's Rewind! </h2>
        </div>
        <div class='row'>
            <div class = 'container'>
                <div class='cust-cont'>
                    <%= render @scroll_photos %>
                </div>
            </div>
        </div>
        <div class="load-more-container">
            <%= image_tag "ajax-loader.gif", style: "display:none;", class: "loading-gif" %>
            <%= link_to "Load More", scroll_photos_path, class: "load-more" %>
        </div>
    </div>

_scroll_photo.html.erb

<div class="col-lg-12 col-md-4 col-xs-12">
  <div class="image-box-4-3">
        <div class="record" data-year="<%= scroll_photo.year %>">
            <div class="image-content">
                <%= image_tag(scroll_photo.image_link, width: "100%") %>
            </div>
        </div>
    </div>
  </div>

和 Controller

if params[:year]
      # get all records with id less than 'our last id'
      # and limit the results to 5
      @scroll_photos = ScrollPhoto.where('year < ?', params[:year]).limit(2)
    else
      @scroll_photos = ScrollPhoto.limit(2)
    end
    respond_to do |format|
      format.html
      format.js
    end

JavaScript

$(document).ready(function(){
    // when the load more link is clicked
    $('a.load-more').click(function(e){

      // prevent the default click action
      e.preventDefault();

          // hide load more link
          $('.load-more').hide();

          // show loading gif
          $('.loading-gif').show();

      // get the last id and save it in a variable 'last-id'
          var last_year = $('.record').last().attr('data-year');

          // make an ajax call passing along our last user id
          $.ajax({

            // make a get request to the server
              type: "GET",
              // get the url from the href attribute of our link
              url: $(this).attr('year'),
              // send the last id to our rails app
              data: { year: last_year },
              // the response will be a script
              dataType: "script",

              // upon success 
              success: function(){
                  // hide the loading gif
                  $('.loading-gif').hide();
                  // show our load more link
                  $('.load-more').show();
              }

          });

    });
  });

index.js.erb

$('.cust-cont').append('<%= escape_javascript(render(:partial => @scroll_photos)) %>')

Answer 1

当 Controller 操作返回空时，您可以隐藏加载更多部分@scroll_photos

# in your javascript file

<% if @scroll_photos.empty? %>
  $('.load-more-container').hide()
<% else %>
  $('.cust-cont').append('<%= escape_javascript(render(:partial => @scroll_photos)) %>')
<% end %>