Node.js   发布时间:2022-04-24  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了pug – 使用Jade mixin块作为属性大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
在开发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

目前,mixins的精简版看起来像:

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访问块,以便可以在属性中使用其内容的非空白版本?如果是这样的话?

编辑

为了澄清,我想要以下玉代码

+ibtn
      | My button value

输出

<input value="My button value">

解决方法

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

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

被渲染成……

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

在这种情况下,您想要花费属性,它变为如下:

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)

请记住,mixins是javascript中的函数.

大佬总结

以上是大佬教程为你收集整理的pug – 使用Jade mixin块作为属性全部内容,希望文章能够帮你解决pug – 使用Jade mixin块作为属性所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。