输入中的 pug 嵌套内容

Question

您好，我正在尝试创建可以在 pug 中显示 bootstrap radio button 的嵌套 mixins

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 子级，这显然必须失败。

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

应该记住，不具有值的单选按钮（尤其是在单选按钮组中）几乎没有用处。将textinput 分配给单选按钮的value 属性也可能很有用。

还应避免将id 或class 属性直接传递到标签，而应将每个属性附加# 用于id 或. 获取类名。

最后，如果想要将所有标记的无线电控件附加到 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、）也有帮助。