Rails渲染部分两次

Question

Rails is outputting my articles partial twice. Currently, I just loop through the articles collection and output it. At first I believed it was a problem with AJAX but I deleted all of the javascript in the application.js and the index.js.erb files and it still repeats twice. I've also checked the database by logging in through Rails c and running Articles.all.count and that returns the correct # of articles. I've also reset the db and tried it again with the same result.

article#index

<h1 class="text-center">talks</h1>

<div id="articles-list" class="small-12 small-centered columns">
  <%= render @articles %>
</div>  

<%= will_paginate @articles %>

_article.html.erb partial:

<% @articles.each_with_index do |article, index| %>
<%= index %>
<dl class="individual-article">
    <dt><%= article.title %> 
    <% if current_user.try(:admin) %>
        | <%= link_to 'Edit', edit_article_path(article) %>
    <% end %><br> 
    <%= raw article.tags.map(&:name).map { |t| link_to t, tag_path(t), class: get_class(t) }.join(', ') %>
    </dt>
    <dd><%= truncate(article.body.html_safe, length: 200) %>
        <%= link_to 'more', article_path(article) %>
    </dd>
</dl>

I put the index on to capture if it's repeating and it is. If I have three articles it will output 0 1 2 0 1 2 for the indeces. So I know it's getting executed twice.

article controller

def index
    if params[:tag]
        @articles = Article.tagged_with(params[:tag]).order('created_at DESC').paginate(page: params[:page], per_page: 3)
    else 
        @articles = Article.order('created_at DESC').paginate(page: params[:page], per_page: 3)
    end
end

I have some AJAX for infinite scrolling which may be the problem. Except if I delete the entire js file, it has the same behavior.

index.js.erb

$('#articles-list').append('<%= escape_javascript render(@articles) %>');
$('.pagination').replaceWith('<%= escape_javascript will_paginate(@articles) %>');

Application.js

$(document).ready(function() {
  if ($('.pagination').length) {
    $(window).scroll(function() {
      var url = $('.pagination .next_page').attr('href');
      if (url && $(window).scrollTop() > $(document).height() - $(window).height() - 50) {
        $('.pagination').text("Please Wait...");
        return $.getScript(url);
      }
    });
    return $(window).scroll();

  }
});

I'm relatively new to Rails and would appreciate advice on how to prevent this from executing twice.

Edit

Partial server logs:

...
Article Load (0.2ms)  SELECT  "articles".* FROM "articles"  ORDER BY created_at DESC LIMIT 3 OFFSET 0
...
Rendered articles/_article.html.erb (6.5ms)
Rendered articles/index.html.erb within layouts/application (12.8ms)
Rendered layouts/_header.html.erb (0.4ms)

Answer 1

You are passing a collection to the partial. This will render the partial one time for each element in @articles. In the partial you then loop again on @articles. Take the loop outside the partial or delete it if you don't need the index. These will both work:

article#index

<div id="articles-list" class="small-12 small-centered columns">
  <% @articles.each_with_index do |article, index| %>  
     <%= render 'article', article: article, index: index %>
  <%end%>
</div>

_article.html.erb partial:

<%= index %>
<dl class="individual-article">
  <dt><%= article.title %> 
    <% if current_user.try(:admin) %>
      | <%= link_to 'Edit', edit_article_path(article) %>
    <% end %><br> 
    <%= raw article.tags.map(&:name).map { |t| link_to t, tag_path(t), class: get_class(t) }.join(', ') %>
  </dt>
  <dd><%= truncate(article.body.html_safe, length: 200) %>
    <%= link_to 'more', article_path(article) %>
  </dd>
</dl>

or if you don't need the index in the partial, keep index.html as it is right now and just remove the loop from the partial:

_article.html.erb partial:

<dl class="individual-article">
  <dt><%= article.title %> 
    <% if current_user.try(:admin) %>
      | <%= link_to 'Edit', edit_article_path(article) %>
   <% end %><br> 
   <%= raw article.tags.map(&:name).map { |t| link_to t, tag_path(t), class: get_class(t) }.join(', ') %>
  </dt>
  <dd><%= truncate(article.body.html_safe, length: 200) %>
    <%= link_to 'more', article_path(article) %>
  </dd>