node.js - pug 在输入中嵌套内容

Question

嗨，我正在尝试创建可以显示 bootstrap radio button 的嵌套 mixin在哈巴狗

mixin input(textinput)
   label.btn.btn-secondary
      input(type="radio" name="options" id="option1" autocomplete="off")= textinput

mixin btn-toggle-group(textinput)
   .btn-group(data-toggle="button")

    +btn-toggle-group  
                    +input('coca')
                    +input('pepsi')
                    +input('orangina')
                    +input('lemonade')

但它给了我错误，输入是一个自关闭元素，但它包含嵌套内容

Answer 1

该错误是由于尝试通过 = 将 textinput 设为单选按钮的 TextNode 子级，这显然会失败。

如果想要渲染下一个兄弟文本 Node ，可以使用|运算符(管道)和插值。但也可以使用另一个 html 元素，例如 span。示例代码中提供了这两种变体。

应该记住，没有值的单选按钮(特别是在单选组内)几乎没有用处。将 textinput 也分配给单选按钮的 value 属性可能会很有用。

还应该避免将 id 或 class 属性直接传递到标签中，而应该通过 #(对于 id)或 .(对于类名称)附加每个属性。

最后，如果想要将所有带标签的 radio 控件附加到 btn-group 分类 div 元素，则需要通过仔细缩进的 block 关键字来标记它。

mixin input(textinput)
    label.btn.btn-secondary
        input#option1(type='radio' name='options' autocomplete='off' value=textinput)
        // span.label= textinput
        // span= textinput
        | #{textinput}

mixin btn-toggle-group(textinput)
    .btn-group(data-toggle='button')
        block

+ btn-toggle-group
    + input('coca')
    + input('pepsi')
    + input('orangina')
    + input('lemonade')

上面提供的经过清理和测试的代码现在可以按预期工作。

并阅读pug documentation (attributes、interpolation、mixins、inheritance/templates/blocks、)也有帮助。