Werden die Einrückungen in einem else Block vom Block fortgesetzt?

Question

Der folgende Mops-Skript:

- data = [ "A", "B", "C", "D" ] 
- for (i=0,i<data.length;i++) 
- var even = (i%2)==0 
    if even 
    .row 
     .col #{data[i]} 
    else 
     .col #{data[i]} 

produziert:

<div class="row"> 
    <div class="col">A</div> 
</div> 
<div class="col">B</div> 
<div class="row"> 
    <div class="col">C</div> 
</div> 
<div class="col">D</div> 

Was ich will, ist:

<div class="row"> 
    <div class="col">A</div> 
    <div class="col">B</div> 
</div> 
<div class="row"> 
    <div class="col">C</div> 
    <div class="col">D</div> 
</div> 

der Einzug in dem anderen Block nicht gefolgt Warum? Wie erreiche ich meine gewünschte Leistung?

Answer 1

Pug, von Natur aus, erlaubt nicht diese Art von "extra" Eindruck innerhalb der Block. Um das zu erreichen das gewünschte Ergebnis, könnte man darüber nachdenkt, wie this-

- var data = [ "A", "B", "C", "D" ] 

each datum, index in data 
    if ((index % 2) == 0) 
    .row 
     .col #{datum} 
     if (data[index + 1]) 
     .col #{data[index + 1]} 

-die

Renditen auf

<div class="row"> 
    <div class="col">A</div> 
    <div class="col">B</div> 
</div> 
<div class="row"> 
    <div class="col">C</div> 
    <div class="col">D</div> 
</div> 

Answer 2

Obwohl Seans Antwort richtig ist tut es Code-Duplizierung enthalten, weil Sie müssen angeben, was Sie wollen mit dem Gegenstand zu tun, zweimal pro Reihe. Seine Antwort skaliert auch nicht gut für Situationen, in denen Sie mehr als zwei Elemente pro Zeile benötigen.

Anstatt die [i + 1] Struktur von sean's zu verwenden, würde ich vorschlagen, eine zweite Schleife zu verwenden, um alle Elemente zu finden, die in diese Zeile fallen müssen. Dies kann mit dem folgenden Muster erfolgen:

- var itemsPerRow = 2; // This can be any positive number 
each unused, i in data 
    if (i % itemsPerRow == 0) 
    .row 
     each item, j in data 
     if (j - i >= 0 && j - i < itemsPerRow) 
      .col 
      .. What you want to do with -item- .. 

Die Linie if (j - i >= 0 && j - i < itemsPerRow) stellt sicher, dass nur die Elemente, die tatsächlich in dieser Reihe fallen bekommen machen.

Dies vermeidet Code-Duplizierung, weil Sie nur .. What you want to do with -item- .. einmal eingeben müssen.

Das Ergebnis sieht wie folgt aus

.row 
    .col 
    .col 
.row 
    .col 
    .col 
.row 
    .col 
    .col