もっと見るボタンの実装

記事などを読んでいて一番下に出てくる「もっと見るボタン」をつくってみます。
今回はもっと見るボタンを押すと6個ずつ要素が増えていく設定です。

gemfile.

gem 'kaminari'

bundle installする

手を加える前のindexページです。

index.html.erb

 <h2 class="heading">最新記事</h2>
=========================================
 <% @articles.each do |article| %>
  <div class = "article-box">
    <div class = "image">
      <%= link_to image_tag("#{article.image_url}",:class=>"image"), top_path(:id => article.id) %>
    </div>
    <h3 class="title"><%= link_to article.title , top_path(:id => article.id)%></h3>
    <p class="desc"><%= link_to article.article.truncate(50) , top_path(:id => article.id)%></p>
    <time class="date"><%= article.created_at.strftime("%Y-%m-%d") %></time>
  </div>
<% end %>
=========================================

点線部分切り取って_article_list.html.erbにいれます。

_article_list.html.erb

<% @articles.each do |article| %>
  <div class = "article-box">
    <div class = "image">
      <%= link_to image_tag("#{article.image_url}",:class=>"image"), top_path(:id => article.id) %>
    </div>
    <h3 class="title"><%= link_to article.title , top_path(:id => article.id)%></h3>
    <p class="desc"><%= link_to article.article.truncate(50) , top_path(:id => article.id)%></p>
    <time class="date"><%= article.created_at.strftime("%Y-%m-%d") %></time>
  </div>
<% end %>

そして、中身がなくなってしまったindexページにrenderで_article_list.html.erbを呼び出します。
kaminariをいれたことによってlink_to_next_pageというヘルパーメソッドを使用することができます。（次のページへのリンクをレンダリングする）

index.html.erb

 <h2 class="heading">最新記事</h2>
 <div id="article_lists"><%= render 'article_list' %></div>
 <div class="more"><%= link_to_next_page @articles, 'もっと見る', remote: true, id: 'view_more' %></div>

index.js.erbというjavascriptのファイル（Ajax）を作成し、escape_javascriptメソッドで文字列のエスケープ処理をします。

index.js.erb

$('#article_lists').append("<%= escape_javascript(render 'article_list', object: @articles) %>");
$("#view_more").replaceWith("<%= escape_javascript( 
link_to_next_page(@articles, 'もっと見る', remote: true, id: 'view_more')) %>");

何個ずつ要素を表示させるか（今回は６刻み）

article.rb

paginates_per 6

kaminariのpageメソッドを使用。

articles_controller.rb

@articles = Article.where(status: :true).order(created_at: :desc).page(params[:page])

一通りこれで実装は完了ですが、もしこんなエラーが出たら

gemfile.

gem "jquery-rails"

bundle installしてから以下二行を一番上に付け足す。
上にかかかなきゃ上手く読み込まれなくて動かない模様。

application.js

//= require jquery　　←
//= require jquery_ujs　　←
//= require activestorage
//= require turbolinks
//= require_tree .