Q&A
できると思いますが、viewもcntrolllerも何も情報が哭いところでは助言しようがないです
前提・実現したいこと
Rails学習で簡単な記事投稿Appを作成しています。自身で調べつつ、試行錯誤しましたが解決には至らなかった為、こちらで質問させていただきます。
縦に２分割したページで、左は固定ビュー、右は記事一覧が１０件ほど縦に並んでいます。
右ページのみページネーションを実装し、nextページへいくと左ページが何も表示されなくなります。これを解消して元々設定してある固定ビューを表示させたいのですが、可能でしょうか？
また、可能であれば手段としてはどのようなものが適切でしょうか？
補足情報（FW/ツールのバージョンなど）
Rails 5.2
gem 'kaminari'（ページネーション用）
slim
1/ ヘッダーここから 2.header-bg.sticky-top 3 .header.navbar 4 = link_to "Fishtweet", root_path, class: "my-2 h3 text-white text-decoration-none" 5 ul.nav 6 - unless user_signed_in? 7 li.nav-item 8 = link_to "ログイン", new_user_session_path, class: "nav-link text-white" 9 li.nav-item 10 = link_to "新規登録", new_user_registration_path, class: "nav-link text-white" 11 - else 12 li.nav-item 13 = link_to "マイページ", user_path(current_user), class: "nav-link text-white" 14 li.nav-item 15 = link_to "ログアウト", destroy_user_session_path, method: :delete, class: "nav-link text-white" 16/ ヘッダーここまで 17 18 19/ コンテンツ ここから 20.contents.d-flex.justify-content-end.vh-100 21 / leftcontents 22 .left-content.w-50 23 .article.card.h-100 id="append_to" 24 = image_tag @article.images.first.variant(resize: "450x400").processed, class: "article-img img-fluid shadow-sm" 25 .article-description.card-body.p-1 26 h5.card-title.m-0 27 = @article.title.truncate(10, omission: '…') 28 p.card-text.m-0 29 = @article.user.nickname 30 p.card-text 31 = @article.body.truncate(100, omission: '…') 32 = link_to "続きを読む", article_path(@article), class: "btn btn-outline-dark rounded-pill float-right" 33 34 / rightcontents 35 .right-content.w-50.overflow-auto.vh-100 36 - @articles.each do |article| 37 = link_to article_path(article), class: "text-dark text-decoration-none" do 38 .article-list.card.m-4.shadow-sm 39 .row 40 .article-list-img.col-4 41 - if article.images.count > 0 42 = image_tag article.images.first.variant(resize: "150x150").processed, class: "article-list-img" 43 .article-list-description.card-body 44 h5.card-title 45 = article.title 46 .pagenate.font-weight-bold.text-monospace.mx-auto.mb-5.d-flex.justify-content-center id="page" 47 = paginate(@articles) 48 49 .archive.m-5 50 h5 アーカイブ 51 ul.list-group.list-group-flush 52 = link_to "#", class: "text-dark text-decoration-none" 53 li.list-group-item 2019/10 54 = link_to "#", class: "text-dark text-decoration-none" 55 li.list-group-item 2019/9 56 = link_to "#", class: "text-dark text-decoration-none" 57 li.list-group-item 2019/8 58 = link_to "#", class: "text-dark text-decoration-none" 59 li.list-group-item 2019/7 60 61 .embed-responsive.embed-responsive-16by9.mb-5 62 iframe.embed-responsive-item src="https://www.youtube.com/embed/eo_s9aynXSw?rel=0" 63 64 .right-content-footer.border-top.mx-auto.mb-3.w-75.d-flex.justify-content-around 65 = link_to "#" 66 i.fab.fa-facebook-f.fa-lg.pt-4.text-muted 67 = link_to "#" 68 i.fab.fa-twitter.fa-lg.pt-4.text-muted 69 = link_to "#" 70 i.fab.fa-instagram.fa-lg.pt-4.text-muted 71 = link_to "#" 72 i.fab.fa-github.fa-lg.pt-4.text-muted 73/ コンテンツ ここまで 74 75 76/ フッターここから 77.footer-bg 78 .footer.page-footer.font-small.pt-3.fixed-bottom 79 .container 80 ul.list-unstyled.list-inline.text-center.py-3. 81 li.list-inline-item.text-white 82 h5.mb-1.h5 enjoy fishing 83 li.list-inline-item.text-white 84 - if current_user 85 = link_to new_article_path do 86 .btn.btn-outline-light.btn-lg.rounded-pill 投稿する 87 - else 88 = link_to new_user_session_path do 89 .btn.btn-outline-light.btn-lg.rounded-pill 投稿する 90 91 .footer-copyright.text-center.py-2.text-white.bg-dark © 2019 Copyright 92/ フッターここまで 93
slim
1/ #index.html.slim 2 3/ leftcontents 固定ページ 4 5 .left-content.w-50 6 .article.card.h-100 id="append_to" 7 = image_tag @article.images.first.variant(resize: "450x400").processed, class: "article-img img-fluid shadow-sm" 8 .article-description.card-body.p-1 9 h5.card-title.m-0 10 = @article.title.truncate(10, omission: '…') 11 p.card-text.m-0 12 = @article.user.nickname 13 p.card-text 14 = @article.body.truncate(100, omission: '…') 15 = link_to "続きを読む", article_path(@article), class: "btn btn-outline-dark rounded-pill float-right"
slim
1/ #index.html.slim 2 3/ rightcontents ページネーションページ 4 5 .right-content.w-50.overflow-auto.vh-100 6 - @articles.each do |article| 7 = link_to article_path(article), class: "text-dark text-decoration-none" do 8 .article-list.card.m-4.shadow-sm 9 .row 10 .article-list-img.col-4 11 - if article.images.count > 0 12 = image_tag article.images.first.variant(resize: "150x150").processed, class: "article-list-img" 13 .article-list-description.card-body 14 h5.card-title 15 = article.title 16 .pagenate.font-weight-bold.text-monospace.mx-auto.mb-5.d-flex.justify-content-center id="page" 17 = paginate(@articles)
ruby
1# articles_controller.rb 2 3 def index 4 @articles = Article.includes(:user).order(created_at: :desc).page(params[:page]).per(10) 5 @article = Article.last 6 end
該当箇所のコードになります。一部修正しました。
実装方法としてはJavaScriptでやるというのが最適なのでしょうか？
jQueryを少しかじった程度なのでいまいちイメージが湧きません。
参考記事等ございましたら紹介していただけると幸いです。
よろしくお願い致します。
viewは画面イメージではなく、app/views/* を。
更新しました。
他必要情報あればご指摘お願い致します。
左側って
.left-content.w-50
ですよね？
固定に見えないのですが。@articles を表示してますよね？
left-contentが左側になります。
かなり無茶苦茶な記述ですが、ループで取得して最新の記事のみ表示させるようにしています。１記事には複数の画像があり、一枚だけ表示できるようにしています。
ひとまず意図した表示ができているのですが、改めて修正予定です。
indexのslim全部載せなおしてください
ご返信ありがとうございます。
index.html.slimの全体を追加しました。
また何かありましたら、ご指摘いただけると幸いです。
申し訳ありません。ビューのコードを修正して確認したところ、意図した実装ができていることを確認しました。
こちらの確認不足で余計な手間を取らせてしまい申し訳ありません。
コードの見直しと確認の大事さを再確認できました。ありがとうございます。
回答1件
0
自己解決
index.html.slimを修正したところ、こちらの意図した実装ができました。
left-contentの表示をeachで取り出していたこと自体がそもそもの原因のようです。
ご指摘をいただき設計事態を見直し、左画面は固定ページなので、単体で値を取得し、右画面が一覧となるのでeachで表示したところ解決致しました。
投稿2019/12/09 01:35
総合スコア9
あなたの回答
tips
プレビュー
