尝试根据使用 mixin 时有多少问题来遍历一些 html。
我期望这段代码会在 div 上循环 3 次并将每个问题传递到 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
- }
- 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+':'
输入字段.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> </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 '#'
最佳答案
发现问题了。。
变量不需要插值,因为它被传递给 mixin 而不仅仅是作为文本。输入标签 mixin 调用应为 +input-label(questions[i])
对于输入字段 mixin 调用,我有错误的属性。它是 value
不是 val
.并且还删除了插值。所以看起来像这样:+input-field()(value=answers[i] disabled)
关于pugJS 在循环中将变量传递给 mixin,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47402712/