pugJSループ内でmixinに変数を渡す

Question

mixinを使用している間にいくつの質問があるかに基づいていくつかのHTMLをループしてみようとしています。

私はこのコードがdivに3回ループし、それぞれの質問をinput-labelとinput-fieldというmixinsに渡して、ちょうどテキストだけでmixinを使っているかのように適切なhtmlを吐き出すことを期待しています。

パグコード

- 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')      
     - } 
- } 

入力label.pug

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

入力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) 

期待結果

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

実際の結果 - pugjsエラーの問題を発見

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

それは単なるテキストとしてミックスインに渡されていないされていますので、..

変数は、補間を必要としませんでした。入力ラベルmixinコールは、+input-label(questions[i])

と入力フィールドミックスインコールに関して、私は間違った属性を持っています。それはvalueではなく、valです。補間も取り除く。だからこのようになります：+input-field()(value=answers[i] disabled)