テックキャンプの復習です!
いいねお願いします!
目的
- 部分テンプレートの理解
- 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