เนื้อหาหยกตามแท็กปิดตัวเอง

ฉันกำลังแปลง HTML บางส่วนจากแอปพลิเคชันที่มีอยู่แล้วเป็น Jade ฉันมีบล็อก HTML ที่มีลักษณะดังนี้:

<div class="checkbox">
  <label>
    <input type="checkbox" name="data[day][sunday]" value="sunday">
  Sunday
  </label>
</div>

หยกที่เทียบเท่านี้จะเป็นอย่างไร? โดยหลักการแล้วมันจะมีลักษณะดังนี้:

div(class="checkbox"):
  label 
    input(type="checkbox" name="data[day][sunday]" value="sunday") 
    Sunday

แต่เนื่องจาก input เป็นแท็กปิดตัวเอง จึงไม่สามารถตามด้วยข้อความ "วันอาทิตย์" ได้

ฉันไม่มีปัญหาในการเขียนสิ่งนี้ในลักษณะอื่นที่ทำงานได้ตรงตามที่ฉันต้องการ แต่ฉันต้องการทราบวิธีแก้ปัญหานี้อย่างแน่นอน

ขอบคุณ!


html pug
person Mike Hamilton    schedule 21.04.2015    source แหล่งที่มา

คำตอบ (1)


arrow_upward
5
arrow_downward

คุณสามารถใช้ | ในหยกเพื่อแก้ไขปัญหานี้ได้

ข้อความใดๆ ที่ตามหลัง | จะถูกตีความว่าเป็นข้อความในพาเรนต์

div(class="checkbox"):
  label 
    input(type="checkbox" name="data[day][sunday]" value="sunday") 
    | Sunday

คุณยังสามารถใช้แท็กปิดที่ไม่ใช่ตัวเองได้เช่นนี้

div
  div
    span hello there
  | and plain text

จะได้ผลลัพธ์เป็น html แบบนี้

<div>
  <div>
    <span>hello there</span>
  </div>
  and plain text
</div>

โปรดทราบว่าการเขียน HTML โดยตรงภายใน Jade นั้นถูกต้องโดยสมบูรณ์ คุณสามารถแก้ไขปัญหานี้ได้เช่นกัน

div(class="checkbox"):
  label.
    <input type="checkbox" name="#{data[day][sunday]}" value="sunday"> 
    Sunday

การ . ที่ตามหลังแท็กใน Jade จะถือว่าเนื้อหาทั้งหมดเหมือนกับข้อความ

person JoshWillik    schedule 21.04.2015
comment
ขอบคุณคำตอบของคุณทำงานได้ดี! ตอนนี้ฉันไม่ได้อยู่ที่คอมพิวเตอร์เพื่อทดสอบสิ่งนี้ แต่ฉันคิดว่าฉันสามารถใช้หลักการเดียวกันนี้ได้หากฉันต้องการใช้ประโยชน์จากการขยายบล็อกของ Jade มันจะดูเป็นอย่างไร? ฉันเดาว่านี่คือ: div(class="checkbox"): label: input(type="checkbox" name="data[day][sunday]" value=") | Sunday - person Mike Hamilton; 22.04.2015
comment
@MichaelHamilton ใช่ | ทำงานไม่ว่าคุณจะใช้แท็กประเภทใดก็ตาม ฉันได้แก้ไขคำตอบเพื่อสะท้อนสิ่งนี้ - person JoshWillik; 22.04.2015