我想创建以下 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:
我可以创建两个 mixin - 一个 òuterspace
和一个 ìnner
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
这会产生与上述相同的结构,但会为每个生成的 block 分配相同的内容:
<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 Inner content”这一行放在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>
关于node.js - 将内容分配给 mixin 中的多个 block ,该 mixin 在 Jade 中动态生成嵌套的 HTML 结构?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16235224/