การใช้งานบล็อกหยกมิกซ์อินหลายครั้งในเทมเพลตเดียว

ฉันค่อนข้างใหม่กับหยกและฉันมีปัญหาดังต่อไปนี้ มีมิกซ์อิน (แบบง่าย) นี้:

mixin someMixin()
   .someClass 
      block first
   .otherClass 
      block second

ตอนนี้ฉันพยายามให้คุณมิกซ์อินนี้หลายครั้งในเทมเพลตเดียว แบบนี้.

+someMixin()
   block first
      div First Block of first Mixin
   block second
      div Second Block of first Mixin

+someMixin()
   block first
      div First Block of second Mixin
   block second
      div Second Block of second Mixin

ด้วยเหตุนี้จึงใช้เฉพาะบล็อกของมิกซ์อินแรกเท่านั้น แบบนี้

<div class="someClass">First Block of first Mixin</div>
<div class="otherClass">Second Block of first Mixin</div>

<div class="someClass">First Block of first Mixin</div>
<div class="otherClass">Second Block of first Mixin</div>

ฉันคาดหวังผลลัพธ์เช่นนี้:

<div class="someClass">First Block of first Mixin</div>
<div class="otherClass">Second Block of first Mixin</div>

<div class="someClass">First Block of second Mixin</div>
<div class="otherClass">Second Block of second Mixin</div>

ฉันพลาดอะไรไปที่นี่? ขอบคุณล่วงหน้า.

อามิรู


mixins pug block
person amiroo    schedule 08.09.2015    source แหล่งที่มา

คำตอบ (2)


arrow_upward
3
arrow_downward

จาก http://jade-lang.com/reference/inheritance/:

บล็อกเป็นเพียง "บล็อก" ของ Jade ที่อาจถูกแทนที่ด้วยเทมเพลตลูก

หากคุณต้องการใช้ข้อมูลอื่นในมิกซ์อิน ให้ใช้ตัวแปร:

mixin someMixin(a, b)
    div.someClass #{a}
    div.otherClass #{b}

+someMixin("1-1", "1-2")
+someMixin("2-1", "2-2")

ผลลัพธ์:

<div class="someClass">1-1</div>
<div class="otherClass">1-2</div>
<div class="someClass">2-1</div>
<div class="otherClass">2-2</div>
person KZee    schedule 08.09.2015

arrow_upward
3
arrow_downward

ขอยกเครดิตให้กับ nekitk บน Codepen.io นี่เป็นเทคนิคที่หลบเลี่ยง ข้อจำกัดบล็อกเดียว:

// initialization
- blocks = {}

mixin set(key)
  - blocks[key] = this.block

// mixin definition
mixin layout
  block
  .main
    - blocks.main()
  .side
    - blocks.side()

// mixin call
+layout
  +set('main')
    p Main
  +set('side')
    p Side
person Robert K. Bell    schedule 26.04.2017
comment
สิ่งนี้มีประโยชน์จริงๆ! นอกจากนี้ การทำให้บล็อกเพิ่มเติมเหล่านี้เป็นทางเลือกก็มีประโยชน์เช่นกัน: if blocks.main ... ด้วยวิธีนี้คุณสามารถสร้างมิกซ์อิน (เช่น ส่วนประกอบ) ที่ใช้งานได้อย่างยืดหยุ่น - person Remi; 06.05.2018
comment
น่าเศร้าที่สิ่งนี้บังคับให้คุณต้องตั้งค่าทั้ง 'หลัก' และ 'ด้านข้าง' เสมอ หากคุณสร้างบล็อก 'เค้าโครง' อันที่สองและเพิ่มเฉพาะบล็อก 'ด้านข้าง' บล็อกนั้นจะคัดลอกบล็อกของอินสแตนซ์แรก (ตัวอย่าง: codepen.io/anon/pen/gzXRre?editors=1000) - person Remi; 07.05.2018