0
1

投稿アプリの複数ページで利用する表示の一部をまとめる

Posted at

テックキャンプの復習です!
いいねお願いします!

目的

  • 部分テンプレートの理解
  • renderメソッドで描画方法を理解
  • 部分テンプレートのメリットを理解

表示の一部をまとめて再利用しよう

部分テンプレート

ビューファイルにおいて繰り返し使用するコードを切り出し、再利用する仕組み
rubyで繰り返し使うような処理をメソッドでまとめてきたのと同じ。

テンプレート自体のファイル名は、命名規則として、アンダースコア_を先頭に記述します

投稿表示一覧部分をまとめよう

app/views/tweets_tweet.html.erb作成

renderメソッド

部分テンプレートを呼び出す際に利用するメソッド

partialオプション

renderメソッドで使用できるオプション
partialというオプションをつけ、部分テンプレート名を指定することで、該当する部分テンプレートを表示できる
例)
<%= render partial: "sample" %>

localsオプション

renderメソッドで使用できるオプション
部分テンプレート内でその変数を使えるようになる
例)
<%= render partial: "sample", locals: {post: "hello!"}%>

app/views/tweets/index.html.erb , show.html.erb

<div class="contents row">
  <% @tweets.each do |tweet| %>
    <%= render partial: "tweet", locals: { tweet: tweet} %>
  <% end %>
</div>

フォーム部分まとめる

app/views/tweets_form.html.erb作成
変更前
<%= form_with(model: @tweet, local: true) do |form| %>
変更後
<%= form_with(model: tweet, local: true) do |form| %>

app/views/tweets/new.html.erb  , edit.html.erb

<div class="contents row">
  <div class="container">
    <h3>投稿する</h3>      
    <%= render partial: "form", locals: { tweet: @tweet } %>
  </div>
</div>

先ほど切り出したフォームの部分テンプレートにおいては、model:tweetとなっています。したがって、
locals:{tweet: @tweet}と記述して、@tweet→tweetと読み替える記述をする

ruby

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1