pugJS übergibt eine Variable an ein Mixin in einer Schleife

Question

Versuchen, einige HTML-Code basierend auf wie viele Fragen gibt es während der Verwendung eines Mixin Loop.

Ich erwarte, dass dieser Code über die div 3 Zeiten Schleife und jede Frage in die Mixins von input-label und input-field übergeben und spuckt die richtige HTML aus, als ob ich ein Mixin mit nur Text verwenden.

PUG-Code

- var questions = ['question one', 'question two', 'question three']; 
- var answers = ['answer one', 'answer two', 'answer three']; 

- for (var i = 0; i < questions.length; i++) { 
    div.row.row-loose 
     div.col-md-6 
      +input-label(#{questions[i]}) 
     div.col-md-5 
      +input-field()(val=#{answers[i]} disabled) 
     - if(i == 0) { 
      span &nbsp; 
     - } 
     - else { 
      div.col-md-1 
       +button-default('Modify')      
     - } 
- } 

eingabe label.pug

mixin input-label(label) 
    label.control-label(class=attributes.class required for=attributes.id+'-'+label) 
     if attributes.required 
      span.required * 
     =label+':' 

eingabe field.pug

mixin input-field() 
    input.form-control(type='text' class=attributes.class id=attributes.id value=attributes.value disabled=attributes.disabled readonly=attributes.readonly) 

erwarteten Ergebnisse

<div class="row row-loose"> 
    <div class="col-md-6"> 
     <label class="control-label">question one</label> 
    </div> 
    <div class="col-md-5"> 
     <input class="form-control" type="text" disabled="disabled" val="answer one" /> 
    </div><span>&nbsp; </span></div> 
<div class="row row-loose"> 
    <div class="col-md-6"> 
     <label class="control-label">question two</label> 
    </div> 
    <div class="col-md-5"> 
     <input class="form-control" type="text" disabled="disabled" val="answer two" /> 
    </div> 
    <div class="col-md-1"> 
     <button class="btn btn-default" type="button">Modify</button> 
    </div> 
</div> 
<div class="row row-loose"> 
    <div class="col-md-6"> 
     <label class="control-label">question three</label> 
    </div> 
    <div class="col-md-5"> 
     <input class="form-control" type="text" disabled="disabled" val="answer three" /> 
    </div> 
    <div class="col-md-1"> 
     <button class="btn btn-default" type="button">Modify</button> 
    </div> 
</div> 

tatsächliche Ergebnis - pugjs Fehler

27|     div.row.row-loose 
28|      div.col-md-6 
29|       +input-label(#{questions[i]}) 
------------------------------------------^ 
30|      div.col-md-5 
31|       +input-field()(val=#{questions[i]} disabled) 
32|      - if(i == 0) { 

Syntax Error: Unexpected character '#' 

Answer 1

das Problem gefunden ..

Variablen brauchte die Interpolation nicht, da es zu einem mixin weitergegeben werden ist und nicht nur als Text. Der Input-Label-Mixin-Aufruf sollte lauten +input-label(questions[i])

Und für das Eingabefeld Mixin Call hatte ich das falsche Attribut. Es ist value nicht val. Und auch das Entfernen der Interpolation. Sieht so aus: +input-field()(value=answers[i] disabled)