layout, partial และ locals — แม่พิมพ์ที่ใช้ซ้ำได้

1 · layout ของจริงในโปรเจกต์ — จานรองที่ยังไม่มีโลโก้ร้าน

ทวนสั้น ๆ: layout คือไฟล์ที่ครอบทุกหน้าให้อัตโนมัติ · ของที่ทุกหน้าต้องมี (หัวเว็บ · CSS · JavaScript) เขียนไว้ที่เดียว · ส่วนเนื้อหาของแต่ละหน้าถูกวางลงตรง <%= yield %>

เปิดไฟล์จริงของโปรเจกต์ app/views/layouts/application.html.erb (ทั้งไฟล์ 31 บรรทัด · ผมใส่เลขบรรทัดไว้ข้างหน้าให้อ้างถึงง่าย — เลขพวกนี้ไม่มีในไฟล์จริง):

 1  <!DOCTYPE html>
 2  <html>
 3    <head>
 4      <title><%= content_for(:title) || "Wongnok Blog All In One" %></title>
 5      <meta name="viewport" content="width=device-width,initial-scale=1">
 6      <meta name="apple-mobile-web-app-capable" content="yes">
 7      <meta name="application-name" content="Wongnok Blog All In One">
 8      <meta name="mobile-web-app-capable" content="yes">
 9      <%= csrf_meta_tags %>
10      <%= csp_meta_tag %>
11
12      <%= yield :head %>
13
14      <%# Enable PWA manifest for installable apps (make sure to enable in config/routes.rb too!) %>
15      <%#= tag.link rel: "manifest", href: pwa_manifest_path(format: :json) %>
16
17      <link rel="icon" href="/icon.png" type="image/png">
18      <link rel="icon" href="/icon.svg" type="image/svg+xml">
19      <link rel="apple-touch-icon" href="/icon.png">
20
21      <%# Includes all stylesheet files in app/assets/stylesheets %>
22      <%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
23      <%= javascript_importmap_tags %>
24    </head>
25
26    <body>
27      <main class="container mx-auto mt-28 px-5 flex">
28        <%= yield %>
29      </main>
30    </body>
31  </html>

ไม่ต้องเข้าใจทุกบรรทัดตอนนี้ · ตารางนี้บอกว่าแต่ละบรรทัดคืออะไร และต้องสนใจเมื่อไหร่:

สังเกตว่ายังไม่มีแถบเมนูด้านบน (navbar) และส่วนท้าย (footer) — layout นี้มาจาก rails new ตรง ๆ · เราจะเติม navbar ใน Lab บท 129

ป้ายบอกว่า HTML ก้อนไหนมาจากไฟล์ไหน

โปรเจกต์นี้เปิดตัวช่วยไว้ตัวหนึ่ง (บรรทัด config.action_view.annotate_rendered_view_with_filenames = true ใน config/environments/development.rb) · มันแปะคอมเมนต์ HTML (<!-- … --> ข้อความที่เบราว์เซอร์ไม่แสดง) บอกต้นและท้ายของแต่ละไฟล์ · ลองดึงหน้าบทความแรกแล้วกรองเอาเฉพาะป้ายพวกนี้:

$ curl -s localhost:3000/posts/1 | grep -E "BEGIN|END"
<!-- BEGIN app/views/layouts/application.html.erb
      <!-- BEGIN app/views/posts/show.html.erb
  <!-- BEGIN app/views/posts/_post.html.erb
<!-- END app/views/posts/_post.html.erb -->
<!-- END app/views/posts/show.html.erb -->
<!-- END app/views/layouts/application.html.erb -->

• curl -s = ขอหน้าเว็บแบบเงียบ ๆ (ไม่โชว์แถบความคืบหน้า) · | grep -E "BEGIN|END" = เลือกเฉพาะบรรทัดที่มีคำว่า BEGIN หรือ END
• ป้าย BEGIN ไม่มี --> ปิดท้าย เพราะ Rails ไปปิดไว้บรรทัดถัดไป · grep เลือกมาแค่บรรทัดที่มีคำว่า BEGIN จึงไม่เห็นตัวปิด
• หนึ่งหน้าเว็บประกอบจากสามไฟล์ซ้อนกัน: layout ครอบ show.html.erb และในนั้นยังมี _post.html.erb อีกชั้น
• ป้ายนี้โผล่เฉพาะตอนพัฒนาในเครื่อง · ใช้มันได้ทั้งบทเวลาสงสัยว่า "ข้อความตรงนี้มาจากไฟล์ไหน"

มี layout ได้หลายอัน (แค่รู้จักไว้): ถ้าวันหนึ่งหน้าผู้ดูแลระบบต้องหน้าตาต่างจากหน้าผู้อ่าน · เขียน layout "admin" ไว้ใน controller ตัวนั้น แล้ว Rails จะใช้ไฟล์ app/views/layouts/admin.html.erb เป็นจานรองแทน · controller อื่นยังใช้ application เหมือนเดิม · โปรเจกต์เราตอนนี้มีอันเดียว

# app/controllers/admin_controller.rb (ตัวอย่างจากสไลด์หน้า 12 · โปรเจกต์เรายังไม่มีไฟล์นี้)
class AdminController < ApplicationController
  layout "admin"
end

2 · content_for — ฝากป้ายชื่อเมนูขึ้นไปติดหัวจานรอง

ของในไฟล์ show.html.erb ถูกวางลงตรง yield ซึ่งอยู่ใน <body> · แต่ชื่อแท็บเบราว์เซอร์ (<title>) อยู่ใน <head> ข้างบนโน่น · หน้า show จะส่งชื่อบทความขึ้นไปตรงนั้นได้ยังไง?

คำตอบคือ content_for = ฝากของใส่กล่องที่ติดชื่อไว้ · view เขียน "ฝากใส่กล่องชื่อ :title" · layout เขียน "ตรงนี้เอาของในกล่อง :title มาวาง" · ทำแบบนี้ได้เพราะ Rails จัด view ให้เสร็จก่อน แล้วค่อยเอาไปวางในจานรอง — ตอน layout ทำงาน กล่องมีของรออยู่แล้ว

ลำดับนี้เห็นได้จริงใน log ของ server (หน้าต่างที่รัน bin/dev หรือไฟล์ log/development.log) · ตัวอย่างนี้มาจากตอนเปิดหน้า /posts:

  Rendered posts/index.html.erb within layouts/application (Duration: 9.6ms | GC: 4.2ms)
  Rendered layout layouts/application.html.erb (Duration: 10.6ms | GC: 4.2ms)

บรรทัดแรก = "จัด index เสร็จแล้ว (เพื่อวางใน layout application)" · บรรทัดที่สอง = "จัดจานรองเสร็จ" — view มาก่อนเสมอ · ตัวเลขในวงเล็บคือเวลาที่ใช้ (GC = เวลาที่ Ruby เก็บกวาดหน่วยความจำ) ไม่ต้องสน

ลองจริง: ให้แท็บเบราว์เซอร์ขึ้นชื่อบทความ

scaffold ตั้งชื่อหน้าไว้ให้แล้วในบรรทัดแรกของ app/views/posts/show.html.erb · ดูผลก่อนแก้:

<% content_for :title, "Showing post" %>

$ curl -s localhost:3000/posts/1 | grep '<title>'
    <title>Showing post</title>

ทุกบทความได้ชื่อแท็บว่า "Showing post" เหมือนกันหมด · เปิด 5 แท็บก็แยกไม่ออกว่าแท็บไหนบทความอะไร · แก้บรรทัดนั้น (แทนที่ ไม่ใช่เพิ่มบรรทัดใหม่) ให้เป็น:

<% content_for :title, @post.title %>

• <% %> ไม่มี = — เพราะเราไม่ได้อยากให้ชื่อโผล่ตรงนี้ในเนื้อหน้า แค่ฝากไว้ (บท 122: ทำในครัวเงียบ ๆ ไม่ขึ้นจาน)
• content_for :title, … = "ฝากของชิ้นนี้ใส่กล่องชื่อ :title" (:title คือ symbol · บท 92)
• @post.title = ชื่อบทความที่ controller วางไว้บนถาด

$ curl -s localhost:3000/posts/1 | grep '<title>'
    <title>ต้มยำกุ้งน้ำข้น</title>

$ curl -s localhost:3000/posts/2 | grep '<title>'
    <title>ก๋วยเตี๋ยวเรืออยุธยา</title>

ฝั่ง layout บรรทัด 4 content_for(:title) || "Wongnok Blog All In One" คือการเปิดกล่องดู · มีของก็ใช้ · กล่องว่างก็ได้ nil แล้ว || หยิบชื่อแอปมาแทน (ผมลองลบบรรทัด content_for ทิ้ง ได้ <title>Wongnok Blog All In One</title> จริง)

ฝากของที่ยาวกว่าหนึ่งบรรทัด — content_for :head do … end

บรรทัด 12 ของ layout (<%= yield :head %>) คือกล่องอีกใบชื่อ :head · ใช้ฝาก <meta> ที่อยากให้มีเฉพาะบางหน้า · เช่น <meta name="description"> = คำโปรยสั้น ๆ ที่ Google หรือแอปแชตเอาไปโชว์ใต้ลิงก์ · เติมต่อจากบรรทัด title ในไฟล์ show.html.erb:

<% content_for :title, @post.title %>
<% content_for :head do %>
  <meta name="description" content="<%= @post.description %>">
<% end %>

• content_for :head do … end = ฝากของทั้งก้อนระหว่าง do กับ end (block · บท 93) · ใช้เมื่อของที่ฝากเป็น HTML หลายบรรทัด
• <%= @post.description %> ข้างใน = เติมคำบรรยายลงในช่อง content="…" ก่อนฝาก

$ curl -s localhost:3000/posts/1 | grep -B3 'name="description"'
<meta name="csrf-token" content="0C_BIl1dCpfY4FWzXI23fn7TsfMv_5doRL0Hpn9qXuxYmswNS4dyO4l6KLVki1UAdhJBxrJyZqUAYTWzZu-V5g" />


      <meta name="description" content="ต้มยำกุ้งแบบน้ำข้นใส่นมข้นจืด รสเปรี้ยวเผ็ดกลมกล่อม กุ้งแม่น้ำตัวใหญ่ หอมตะไคร้ ข่า ใบมะกรูด กินกับข้าวสวยร้อน ๆ ได้ทั้งถ้วย ร้านนี้เปิดมาสามสิบปีแล้ว คิวยาวทุกวันเสาร์อาทิตย์">

• grep -B3 = โชว์บรรทัดที่เจอ พร้อม 3 บรรทัดก่อนหน้า (B = before) — จะได้เห็นว่ามันไปอยู่ตรงไหน
• บรรทัดแรกคือ csrf-token ที่ csrf_meta_tags (บรรทัด 9) พิมพ์ออกมา · บรรทัดว่างสองบรรทัดคือ csp_meta_tag ที่ไม่พิมพ์อะไร กับบรรทัด 11 ที่ว่างอยู่แล้ว · แล้วถึง meta ของเรา = ตำแหน่งของ yield :head (บรรทัด 12) พอดี
• <meta> ไม่โผล่บนหน้าเว็บ (มันอยู่ใน head) · หน้า /posts ไม่ได้ฝากอะไรไว้ กล่อง :head ของหน้านั้นจึงว่าง

เทียบกับ Next.js: ใน บท 83 เราเห็น export const metadata ใน app/layout.tsx — ที่ตั้งชื่อหน้าของ Next.js (เป็น object) · content_for :title คืองานเดียวกันฝั่ง Rails แต่ใช้วิธี "ฝากใส่กล่อง": หน้าลูกเป็นคนบอกชื่อ · layout เป็นคนวาง

3 · partial — แม่พิมพ์ที่ scaffold ทำไว้ให้แล้ว

partial คือไฟล์ view ชิ้นเล็กที่ชื่อขึ้นต้นด้วย _ · ไม่เคยถูกเปิดเป็นหน้าเดี่ยว ๆ ต้องมีไฟล์อื่นเรียกใช้เสมอ · มีไว้ให้ของที่หน้าตาเหมือนกันหลายที่ (กล่องบทความหนึ่งชิ้น · ฟอร์ม) เขียนครั้งเดียว · แก้ที่เดียวเปลี่ยนทุกที่

scaffold สร้าง partial ของบทความไว้แล้ว · เปิดไฟล์ app/views/posts/_post.html.erb ของจริง:

<div id="<%= dom_id post %>" class="w-full sm:w-auto my-5 space-y-5">
  <div>
    <strong class="block font-medium mb-1">Title:</strong>
    <%= post.title %>
  </div>
  <div>
    <strong class="block font-medium mb-1">Description:</strong>
    <%= post.description %>
  </div>
  <div>
    <strong class="block font-medium mb-1">Category:</strong>
    <%= post.category_id %>
  </div>
</div>

• post (ไม่มี @) = บทความหนึ่งชิ้นที่ "ถูกยื่นเข้ามา" ตอนเรียก partial · เรียกว่า local (ตัวแปรเฉพาะในไฟล์นี้) · หัวข้อ 5 จะอธิบายว่าทำไมต้องไม่มี @
• dom_id post = helper สร้าง id ให้กล่อง เช่น post_1 (ป้ายเลขถ้วย — ได้ใช้จริงในบท 131)
• post.category_id = โชว์เลขหมวด (เช่น 1) ไม่ใช่ชื่อหมวด — scaffold ไม่รู้ว่าเราอยากเห็นอะไร · ภารกิจท้ายบทจะลองเปลี่ยน
• class ยาว ๆ เป็น Tailwind (บท 72) — เรื่องหน้าตา ข้ามไปก่อนได้ (บท 128 ว่ากันละเอียด)

แล้วใครเรียกมัน? เปิดสองไฟล์นี้ดู (ตัดมาเฉพาะบรรทัดที่เกี่ยว):

<%# app/views/posts/show.html.erb (บรรทัด 10) %>
<%= render @post %>

<%# app/views/posts/index.html.erb (บรรทัด 15–17 · ในลูปที่วนทีละบทความ) %>
<% @posts.each do |post| %>
  …
    <%= render post %>

ทั้งสองที่ไม่ได้บอกชื่อไฟล์เลย · Rails ดูจากของที่ส่งให้: "นี่คือ object ของ class Post → ไฟล์ต้องชื่อ posts/_post.html.erb → ยื่นของชิ้นนี้เข้าไปในชื่อ post" · นี่คือเหตุผลที่ไฟล์ต้องชื่อ _post เป๊ะ ๆ

เทียบกับ React: partial ≈ component (บท 71) · <%= render post %> ≈ <PostCard post={post} /> · ต่างกันที่ React ต้องเขียนชื่อ component เสมอ ส่วน Rails เดาชื่อไฟล์จาก class ของ object ได้

4 · render @posts — บรรทัดเดียวที่ Rails เดาให้ 4 อย่าง

หน้ารายการใน scaffold เขียนลูป each เอง เพราะต้องวางปุ่ม Show/Edit/Destroy ข้างแต่ละบทความ · แต่ถ้าแค่อยากวางกล่องบทความเรียงกัน มีวิธีเขียนแบบยาวกับแบบสั้นที่ได้ผลเหมือนกัน

ทดลอง: ลบทุกอย่างใน app/views/posts/index.html.erb แล้วใส่แบบยาวแทน (ปุ่มต่าง ๆ จะหายไปชั่วคราว จบบทเรา git restore คืน):

<% @posts.each do |post| %>
  <%= render "post", post: post %>
<% end %>

<%= render @posts %>

• render "post", post: post = "ใช้แม่พิมพ์ชื่อ post (ไฟล์ _post · ไม่ต้องพิมพ์ขีดล่าง) แล้วยื่น post ของรอบนี้เข้าไปในชื่อ post" · post: post คือ keyword argument (บท 93) — ซ้ายคือชื่อช่องในแม่พิมพ์ · ขวาคือของที่ยื่น
• render @posts = ยื่นบทความทั้งรายการให้ทีเดียว

ภาพในร้าน: แบบยาว = คนจัดจานหยิบแม่พิมพ์ตักข้าวทีละจาน บอกทุกรอบว่า "จานนี้นะ" · แบบสั้น = ยื่นถาดทั้ง 30 จานให้แล้วบอกคำเดียวว่า "ตักให้ทุกจาน" — Rails รู้เองว่าต้องใช้แม่พิมพ์ไหน

ใส่แบบยาวก่อน แล้วสั่งคำสั่งข้างล่าง · จากนั้นเปลี่ยนเป็นแบบสั้น แล้วสั่งซ้ำ · ทุกกล่องมีบรรทัด id="post_…" หนึ่งบรรทัด (มาจาก dom_id ในแม่พิมพ์) · grep -c = นับจำนวนบรรทัดที่เจอ:

$ curl -s localhost:3000/posts | grep -c 'id="post_'
30

ทั้งสองแบบได้ 30 เท่ากัน · แต่ log ของ server เล่าไม่เหมือนกัน:

  Rendered posts/_post.html.erb (Duration: 0.2ms | GC: 0.0ms)
  Rendered posts/_post.html.erb (Duration: 0.0ms | GC: 0.0ms)
  Rendered posts/_post.html.erb (Duration: 0.0ms | GC: 0.0ms)
  …

  Rendered collection of posts/_post.html.erb [30 times] (Duration: 0.7ms | GC: 0.2ms)

แบบยาว = เรียกแม่พิมพ์ 30 ครั้งแยกกัน · แบบสั้น = Rails รู้ว่านี่คือรายการ (collection) จึงจัดการรวดเดียวแล้วรายงานว่า "[30 times]" · สิ่งที่ render @posts เดาให้มี 4 อย่าง:

เทียบกับ React: <%= render @posts %> ≈ {posts.map(post => <PostCard key={post.id} post={post} />)} (key = ป้ายที่ React ใช้แยกแต่ละชิ้นในรายการ) · .map คือ "แปลงของทุกชิ้นในรายการ" (คล้าย each แต่ได้รายการใหม่กลับมา) · => คือการเขียนฟังก์ชันสั้น ๆ "รับ post แล้วคืน PostCard" · ฝั่ง React ต้องเขียนลูปเองทุกครั้ง

# ทดลองให้รายการว่าง: ใน app/controllers/posts_controller.rb ตรง def index
# แก้บรรทัด @posts = Post.all ชั่วคราวเป็น
@posts = Post.where(title: "ไม่มีจริง")   # ไม่มีบทความไหนชื่อนี้ → ได้รายการว่าง

<%# app/views/posts/index.html.erb — สามบรรทัดนี้แทนของเดิม %>
<p>A: <%= render(@posts).inspect %></p>
<p>B: <%= render(@posts) || "ไม่มีบทความ" %></p>
<p>C: <%= render @posts || "ไม่มีบทความ" %></p>

$ curl -s localhost:3000/posts | grep -E '<p>[ABC]:'
--><p>A: nil</p>
<p>B: ไม่มีบทความ</p>
<p>C: </p>

ของแถม — post_counter (ได้เฉพาะแบบสั้น)

ตอน render เป็นรายการ Rails แถมตัวแปรอีกตัวชื่อ post_counter = "นี่คือชิ้นที่เท่าไหร่" นับจาก 0 · ชื่อมาจากชื่อไฟล์ + _counter · ลองเพิ่มบรรทัดที่ 2 ใน _post.html.erb (index ยังเป็น <%= render @posts %>):

<div id="<%= dom_id post %>" class="w-full sm:w-auto my-5 space-y-5">
  <p>ลำดับที่ <%= post_counter %></p>
  …

$ curl -s localhost:3000/posts | grep 'ลำดับที่' | head -3
  <p>ลำดับที่ 0</p>
  <p>ลำดับที่ 1</p>
  <p>ลำดับที่ 2</p>

$ curl -s localhost:3000/posts | grep 'ลำดับที่' | tail -1
  <p>ลำดับที่ 29</p>

head -3 = เอา 3 บรรทัดแรก · tail -1 = เอาบรรทัดสุดท้าย · 30 บทความ นับ 0 ถึง 29

<%# _post.html.erb ยังมีบรรทัด ลำดับที่ <%= post_counter %> อยู่ %>
<%# show.html.erb เรียกแม่พิมพ์ตัวเดียวกันด้วย %>
<%= render @post %>

$ curl -s -o /dev/null -w '%{http_code}\n' localhost:3000/posts/1
500

ActionView::Template::Error (undefined local variable or method 'post_counter' for an instance of #<Class:0x0000000129e72f00>)

5 · locals กับ @ตัวแปร — ยื่นใส่มือ หรือให้ไปควานหาบนถาดเอง

partial รับข้อมูลได้สองทาง: ยื่นเข้าไปตอนเรียก (local เช่น post) กับไปหยิบ @post ที่ controller วางไว้บนถาดเอง · ทางที่สองดูง่ายกว่า แต่ @post มีอยู่เฉพาะหน้าที่ action ของ controller ตั้งค่าไว้เท่านั้น

ลองทำผิดดูก่อน · ขั้นที่ 1 คืน index เป็นของ scaffold เดิม: git restore app/views/posts/index.html.erb · ขั้นที่ 2 ในไฟล์ _post.html.erb เปลี่ยน <%= post.title %> เป็น <%= @post.title %> บรรทัดเดียว

$ curl -s localhost:3000/posts/1 | grep -A1 'Title:'
    <strong class="block font-medium mb-1">Title:</strong>
    ต้มยำกุ้งน้ำข้น

$ curl -s -o /dev/null -w '%{http_code}\n' localhost:3000/posts
500

หน้าบทความยังทำงาน · หน้ารายการพัง · เบราว์เซอร์ขึ้นหัวหน้า error ว่า NoMethodError in Posts#index และชี้ไปที่ _post.html.erb พร้อมข้อความ:

undefined method 'title' for nil

• grep -A1 = บรรทัดที่เจอ + 1 บรรทัดหลังถัดไป (A = after)
• หน้า show: action show วาง @post ไว้บนถาด (ผ่าน before_action :set_post · ท่าเดียวกับ set_category ในบท 118) → partial ไปหยิบเจอ
• หน้า index: action index วางแค่ @posts (มี s) · @post ไม่มีใครวาง จึงเป็น nil (บท 102) · แล้วถาม nil ว่า "ชื่อเรื่องอะไร" → "nil ไม่มี method ชื่อ title"
• ที่น่ากลัวคือหน้าที่เราลองเปิดดูมันทำงาน · บั๊กไปโผล่ที่หน้าอื่นที่เรียกแม่พิมพ์ตัวเดียวกัน

เทียบกับ React: local = props ที่ยื่นเข้าไปตอนเรียก (<PostCard post={post} />) · @post = ตัวแปรกลาง (global) ของ request นี้ ที่ทุกไฟล์มองเห็น · React บังคับให้ส่งของผ่าน props ด้วยเหตุผลเดียวกัน — เปิดไฟล์ component แล้วรู้ทันทีว่ามันต้องการอะไร และเอาไปวางที่ไหนก็ได้

6 · strict locals — ป้ายติดแม่พิมพ์ "ต้องยื่นอะไรบ้าง"

ตอนนี้ _post.html.erb ไม่ได้บอกไว้ตรงไหนเลยว่า "ต้องยื่น post ให้ฉันนะ" · ต้องอ่านทั้งไฟล์ถึงจะรู้ · Rails ให้เราเขียนบรรทัดประกาศไว้บนสุดของ partialได้ว่ารับอะไรบ้าง แล้ว Rails จะตรวจทุกครั้งที่มีคนเรียก เรียกว่า strict locals

คืน _post.html.erb เป็นของเดิมก่อน (git restore app/views/posts/_post.html.erb) แล้วเพิ่มบรรทัดนี้เป็นบรรทัดแรก:

<%# locals: (post:) %>
<div id="<%= dom_id post %>" class="w-full sm:w-auto my-5 space-y-5">
  …

• หน้าตาเหมือนคอมเมนต์ (<%#) แต่รูปแบบ locals: (…) นี้ Rails อ่านจริง — คอมเมนต์ปกติยังถูกข้ามเหมือนเดิม · เฉพาะที่ขึ้นต้นว่า locals: ตามด้วยวงเล็บเท่านั้นที่มีผล
• (post:) เขียนแบบเดียวกับ keyword argument ของ method (บท 93) · post: ที่ไม่มีค่าตามหลัง = ต้องส่งมาเสมอ

หน้าเดิมยังทำงานปกติ (เพราะทุกที่ยื่น post ให้อยู่แล้ว):

$ curl -s -o /dev/null -w '%{http_code}\n' localhost:3000/posts
200
$ curl -s -o /dev/null -w '%{http_code}\n' localhost:3000/posts/1
200

ทีนี้ลองเรียกผิดสองแบบใน show.html.erb (แก้บรรทัด <%= render @post %> ทีละแบบ) แล้วเทียบกับตอนไม่มีบรรทัดประกาศ:

แถวที่สองสำคัญที่สุด · สมมติจะยื่น show_category: (local ที่เราจะเพิ่มในหัวข้อย่อยถัดไป) แต่พิมพ์ผิดเป็น show_categroy: · ไม่มี strict locals = ไม่มีใครบอก แค่ไม่ทำงาน · มี strict locals = เปิดหน้าแล้วรู้ทันที · ในเบราว์เซอร์จะขึ้นหัวหน้า error ว่า ActionView::StrictLocalsError

local ที่ไม่บังคับ — ใส่ค่าเริ่มต้นไว้

เขียน <%# locals: (post:, show_category: false) %> = "post ต้องส่ง · show_category จะส่งหรือไม่ก็ได้ ถ้าไม่ส่งให้ถือว่า false" · เหมือน keyword argument ที่มีค่าเริ่มต้นในบท 93 ทุกอย่าง · ภารกิจข้างล่างจะใช้ท่านี้

เทียบกับ React + TypeScript: <%# locals: (post:, show_category: false) %> ≈ type ของ props ในบท 71 · type PostCardProps = { post: Post; showCategory?: boolean } (? = ไม่บังคับ) · บรรทัดเดียวบอกได้ว่า partial นี้รับอะไร โดยไม่ต้องอ่านทั้งไฟล์

ภารกิจ — กล่องบทความที่โชว์หมวดได้ตามสั่ง

<%# app/views/posts/_post.html.erb %>
<%# locals: (post:, show_category: false) %>
<div id="<%= dom_id post %>" class="w-full sm:w-auto my-5 space-y-5">
  <div>
    <strong class="block font-medium mb-1">Title:</strong>
    <%= post.title %>
  </div>
  <div>
    <strong class="block font-medium mb-1">Description:</strong>
    <%= post.description %>
  </div>
  <% if show_category %>
    <div>
      <strong class="block font-medium mb-1">Category:</strong>
      <%= post.category.name %>
    </div>
  <% end %>
</div>

<%# app/views/posts/show.html.erb (บรรทัด 10) %>
<%= render @post, show_category: true %>

$ curl -s localhost:3000/posts/1 | grep -A1 'Category:'
      <strong class="block font-medium mb-1">Category:</strong>
      อาหารไทย

$ curl -s localhost:3000/posts | grep -c 'Category:'
0

$ curl -s localhost:3000/posts | grep -c 'id="post_'
30

ทดสอบความเข้าใจ

ถามกลับได้เลย — ถ้าเจอหน้า error สีแดงแล้วไม่รู้ว่าพังที่ไฟล์ไหน ให้ก็อปหัวหน้า error (เช่น ActionView::StrictLocalsError in Posts#index) · ข้อความบรรทัดถัดมา และบรรทัด render ที่เรียก partial นั้นมาถาม · สามอย่างนี้บอกได้เกือบทุกครั้งว่ายื่นของผิดตรงไหน

ถ้าเปิดสไลด์ดูประกอบ

อ้างอิง

• Rails Guides — Layouts and Rendering · Using the content_for Method — อ่านหัวข้อนี้ต่อจาก Understanding yield ข้างบนมัน · แล้วข้ามไป Specifying Layouts for Controllers ถ้าอยากรู้เรื่อง layout "admin"
• Rails Guides — Rendering Collections — render @products แบบเดียวกับ render @posts · ในหัวข้อนี้มีประโยค "render will return nil" กับตัวอย่าง render(@products) || "…" ที่เราลองใน predict
• Rails Guides — Action View Overview · Strict Locals — อ่านหัวข้อนี้ และ Counter Variables ข้างบนมัน (ที่มาของ post_counter) · ส่วน "partials are compiled into regular Ruby methods" ข้ามได้
• Rails API — CaptureHelper#content_for — อ่านย่อหน้า "Note that content_for concatenates…" (ที่มาของชื่อแท็บติดกันในหัวข้อ 2) และ option flush: true ถ้าอยากให้เขียนทับแทน
• Rails 7.1 Release Notes — ค้นคำว่า strict locals ในหน้า (ที่มาของแถวสุดท้ายในตารางสไลด์)