4

尝试根据使用 mixin 时有多少问题来遍历一些 html。

我期望这段代码会在 div 上循环 3 次，并将每个问题传递到 and 的 mixin 中input-label，input-field并吐出正确的 html，就好像我正在使用只有文本的 mixin。

PUG 代码

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

输入标签.pug

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

输入字段.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 '#'
4

1 回答 1

2

发现问题了。。

变量不需要插值，因为它被传递给 mixin 而不仅仅是文本。input-label mixin 调用应为+input-label(questions[i])

对于输入字段 mixin 调用，我有错误的属性。value不是val。_ 并且还删除了插值。所以看起来像这样：+input-field()(value=answers[i] disabled)

于 2017-11-21T16:15:08.087 回答