pug - 使用 Jade mixin block 作为属性

Question

在开发 Jade 模板库时，使用 mixin 块作为属性值已变得可取，从而为最终用户简化语法。

最终用户可以选择 3 种创建按钮的方式；通过标签、按钮标签和输入标签。对于输入标签，我想使用块作为值属性，所以语法总是:

+abtn
    | A Button
+btn
    | Button
+ibtn
    | I Button
+abtn(disabled)
    | A Button Disabled
+btn(disabled)
    | Button Disabled
+ibtn(disabled)
    | I Button Disabled

目前，mixin 的精简版如下所示:

mixin abtn
    - attributes.href = attributes.href || '#'
    - attributes.role = attributes.role || 'button'
    - if (attributes.disabled) {
    -     attributes.class = (attributes.class === undefined) ? 'disabled' : attributes.class + ' disabled';
    -     attributes.disabled = null
    - }
    a.btn(attributes)
        block

mixin btn
    - attributes.type = attributes.type || 'button'
    button.btn(attributes)
        block

mixin ibtn
    - attributes.class = (attributes.class === undefined) ? 'btn' : attributes.class + ' btn';
    - attributes.type = attributes.type || 'button'
    input(attributes=attributes)

问题是为 ibtn 指定 value 属性要求最终用户语法为:

+abtn
    | A Button
+btn
    | Button
+ibtn(value='I Button')
+abtn(disabled)
    | A Button Disabled
+btn(disabled)
    | Button Disabled
+ibtn(value='I Button Disabled', disabled)

这是不一致的。

是否可以通过内置的 javascript 访问块，以便可以在属性中使用其内容的非空白版本？如果是这样怎么办？

编辑

为了澄清，我想要以下 Jade 代码:

+ibtn
      | My button value

输出:

<input value="My button value">

Answer 1

嗯，这是一个语法问题。当您运行 mixin 时, 变成这样，因为括号可以给出参数。就是这样:

mixin myMixin (arg1, arg2)
   p=arg1
   p=arg2
+myMixin('Jade is Cool', 'Yeahh!')

被渲染成...

<p>Jade is Cool</p>
<p>Yeahh!</p>

在这种情况下，您要花费 attributes ，变成如下:

mixin myMixin (arg1, arg2)
    p( id=attributes.id )=arg1
    p( class=attributes.class, value=attributes.value )=arg2
+myMixin('Jade is Cool', 'Yeahh!').myClass#MyId( value="Kool" )

它被渲染为...

<p id="MyId">Jade is Cool</p>
<p class="myClass" value="Kool">Yeahh!</p>

注意站着两个括号，第一个是 mixin前导参数和运行第二个是属性 mixin .在适用的情况下:

+abtn()
    | A Button
+btn()
    | Button
+ibtn()(value='I Button')
+abtn()(disabled)
    | A Button Disabled
+btn()(disabled)
    | Button Disabled
+ibtn()(value='I Button Disabled', disabled)

请记住 mixin s 是 javascript 中的函数。