Node.js   发布时间:2022-04-24  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了node.js – 将内容分配给mixin中的多个块,这些块在Jade中动态生成嵌套的HTML结构?大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我想创建以下 HTML结构

<div class="outerspace">
    <div class="inner1"><p>Inner1 content</p></div>
    <div class="inner2"><p>Inner2 content</p></div>
    <div class="inner3"><p>Inner3 content</p></div>
    (...)
</div>

而内部div的数量可能会有所不同.

例1:

可以创建两个mixins – 一个空间和一个“混合”,通过使用blockkeyword来嵌套它们,并为每个内部div元素放置不同的内容

mixin outerspace()
    div.outerspace
        block

mixin inner($number)
    div(class="inner" + $number)
        block

//- call the mixins
+outerspace()
    +inner(1)
        p Inner1 content
    +inner(2)
        p Inner3 content
    +inner(3)
        p Inner3 content
    ...

例2:

此示例尝试使用单个mixin执行相同操作:

mixin nested_structure($number)
    div.outerspace
        each item in $number
            div(class="inner" + item)
                block

//- call the mixin
+nested_structure([1,2,3])
    p Inner content

这导致与上述相同的结构,但为每个生成的块分配相同的内容

<div class="outerspace">
    <div class="inner1"><p>Inner content</p></div>
    <div class="inner2"><p>Inner content</p></div>
    <div class="inner3"><p>Inner content</p></div>
</div>

问题:我如何使用示例2生成所需的HTML结构,但同时为每个内部div元素分配不同的内容

解决方法

难道你不能把“p内容”行放在mixin里面吗?

mixin nested_structure($number)
    div.outerspace
        each item in $number
            div(class="inner" + item)
                p Inner#{item} content 

//- call the mixin
+nested_structure([1,3])

这将输出

<div class="outerspace">
    <div class="inner1"><p>Inner1 content</p></div>
    <div class="inner2"><p>Inner2 content</p></div>
    <div class="inner3"><p>Inner3 content</p></div>
</div>

大佬总结

以上是大佬教程为你收集整理的node.js – 将内容分配给mixin中的多个块,这些块在Jade中动态生成嵌套的HTML结构?全部内容,希望文章能够帮你解决node.js – 将内容分配给mixin中的多个块,这些块在Jade中动态生成嵌套的HTML结构?所遇到的程序开发问题。

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

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