将内容分配给一个mixin中的多个块,它在Jade中dynamic生成一个嵌套的HTML结构?
我想创build下面的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>
而内部divs
的数量可能会有所不同。
例1:
我可以创build两个mixin(一个òuterspace
和一个“mixin”),使用block
关键字嵌套它们,并为每个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, 2, 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>