banyak penggunaan mixin blok giok dalam satu templat

Saya cukup baru mengenal giok dan saya memiliki masalah berikut. Memiliki mixin (yang disederhanakan) ini:

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

sekarang saya mencoba mencampurkan ini beberapa kali dalam satu template. Seperti ini.

+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

akibatnya hanya blok mixin pertama yang digunakan. Seperti ini

<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>

Saya mengharapkan hasil seperti ini:

<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>

Apa yang kulewatkan di sini? Terima kasih sebelumnya.

Amiroo


mixins pug block
person amiroo    schedule 08.09.2015    source sumber

Jawaban (2)


arrow_upward
3
arrow_downward

Dari http://jade-lang.com/reference/inheritance/:

Sebuah blok hanyalah sebuah "blok" dari Jade yang dapat diganti dalam template anak.

Jika Anda ingin menggunakan data yang berbeda dalam mixin, gunakan variabel:

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

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

Hasil:

<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

Dengan kredit kepada nekitk di Codepen.io, inilah teknik yang dengan rapi menghindari batasan satu blok:

// 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
Ini sangat berguna! Selain itu, menjadikan blok tambahan ini opsional juga berguna: if blocks.main .... Dengan cara itu Anda bisa membuat mixin (yaitu komponen) yang dapat digunakan dengan cara yang fleksibel - person Remi; 06.05.2018
comment
Sayangnya hal ini memaksa Anda untuk selalu mengatur 'utama' dan 'samping'. Jika Anda membuat blok 'tata letak' kedua dan hanya menambahkan blok 'samping' maka blok tersebut akan menyalin blok instance pertama (contoh: codepen.io/anon/pen/gzXRre?editors=1000) - person Remi; 07.05.2018