Wie verwende ich Pug/Jade-Iterationen, um mehrere Elemente mit unterschiedlichem Inhalt zu erstellen?

Question

Ich lerne gerade Iterationen in Pug/Jade. Ich würde dieses Tool gerne in Zukunft verwenden.

Im folgenden Code haben Sie im Grunde, was ein Schieberegler sein soll.

In der ersten Instanz soll die #{i} die Werte 1-4 an jede gelistete Klasse zurückgeben, aber stattdessen kompiliert werden. Obwohl ich diese Technik für andere gesehen habe.

Zweitens im Hinblick auf meine data Array, ich habe in der Lage, die title Wert erhalten in jedem section zeigen jedoch den button Wert immer erscheinen in demselben Behälter die Herausforderung zu sein scheint.

- var data=[{'title':'Home Run', 'button':'It\'s a win'}, {'title':'Testing', 'button':'Tested'}, {'title':'Foreground', 'button':'Background'}, {'title':'Forest', 'button':'Trees'}] 


.slide-container 
    - var i=0; 
    while (i++ < 4) 
     mixin list(title) 
     section(class='slide-#{i}') 
      h2= title 


    each item in data 
    +list(item.title) 
    a(href='#')= item.button 

Der obige Code gibt die folgende:

<div class="slide-container"> 
    <section class="slide-#{i}"> 
     <h2>Home Run</h2> 
    </section><a href="#">It's a win</a> 
    <section class="slide-#{i}"> 
     <h2>Testing</h2> 
    </section><a href="#">Tested</a> 
    <section class="slide-#{i}"> 
     <h2>Foreground</h2> 
    </section><a href="#">Background</a> 
    <section class="slide-#{i}"> 
     <h2>Forest</h2> 
    </section><a href="#">Trees</a> 
</div> 

Das ist sehr gut, aber nicht das, was ich brauche. Was würde Ich mag zu erstellenden sehen, ist die folgende: https://codepen.io/jobaelish/pen/jYyGQM?editors=1000

Was muss ich mit meinem Code tun um das gewünschte Ergebnis zu erhalten:

<div class="slide-container"> 
    <section class="slide-1"> 
     <h2>Home Run</h2> 
     <a href="#">It's a win</a> 
    </section> 
    <section class="slide-2"> 
     <h2>Testing</h2> 
     <a href="#">Tested</a> 
    </section> 
    <section class="slide-3"> 
     <h2>Foreground</h2> 
     <a href="#">Background</a> 
    </section> 
    <section class="slide-4"> 
     <h2>Forest</h2> 
     <a href="#">Trees</a> 
    </section> 
</div> 

Der Stift kann hier eingesehen werden?

---

UPDATE:

Ok. Also, ein neues bisschen Code. Ich war in der Lage, einige der Probleme, die ich anfangs hatte, zu lösen, indem ich die Klasseniteration unter Verwendung von + i anstelle von #{i} auflöste.

Zweitens, durch Hinzufügen eines Tags block zu meinem Pug Mixin, konnte ich die Links aufnehmen, keine Probleme.

Hier ist der neue Code:

- var data=[{'title':'Home Run', 'button':'It\'s a win'}, {'title':'Testing', 'button':'Tested'}, {'title':'Foreground', 'button':'Background'}, {'title':'Forest', 'button':'Trees'}] 


mixin list(title) 
    h2= title 
    block 

.slide-container 
    each item in data 
    //- - var i = 0; 
    //- while i < 4 
    section(class='slide-' + i++) 
     +list(item.title) 
     a(href='#')= item.button 

Welche macht:

<div class="slide-container"> 
    <section class="slide-NaN"> 
    <h2>Home Run</h2><a href="#">It's a win</a> 
    </section> 
    <section class="slide-NaN"> 
    <h2>Testing</h2><a href="#">Tested</a> 
    </section> 
    <section class="slide-NaN"> 
    <h2>Foreground</h2><a href="#">Background</a> 
    </section> 
    <section class="slide-NaN"> 
    <h2>Forest</h2><a href="#">Trees</a> 
    </section> 
</div> 

Also, das einzige, was bleibt, ist die Klassen zu erhalten richtig zu wiederholen, wenn zusammengestellt. Ich habe ein Ergebnis von entweder style-0, style-5 und jetzt style-NaN erhalten.

Wie kann ich jetzt dies als style-1, style-2, etc?

Answer 1

Um Ihre erste Frage zu beantworten: Attributinterpolation (Ausdrücke wie class='slide-#{i}') ist not supported anymore in Pug. Versuchen Sie stattdessen class='slide-' + i.

Bei der zweiten Frage: Sie haben zwei separate Schleifen, weshalb die Tasten und Überschriften getrennt sind. Wenn Sie möchten, dass sie in denselben section Containern angezeigt werden, müssen Sie beide in eine Schleife einfügen, sodass eine Iteration beide addiert.

Auf Ihrer dritten Frage: Ich bin nicht ganz sicher, ob ich die Frage verstanden, aber das ist ein pen mit, wie ich das Problem beheben würde:

.slide-container 
    each item, i in data 
    section(class='slide-' + (i + 1)) 
     +list(item.title) 
     a(href='#')= item.button