按特定顺序渲染Pug / Jade Mixins

Question

在呈现页面的下一部分之前，有没有办法让jade / pug等待执行某些事情？

尝试实现从内容部分自动生成的页面索引/导航：

实施例

var arr = []

mixin section(content)
 - arr.push(content.title)
 h1= content.title
 p= content.text

mixin index()
  ul
    each item in arr
      li= item 

-

+index() // arr/index is empty at this time

+section({foobarz})
+section({foobarz})
+section({foobarz})
+section({foobarz})
...

+index() // arr/index works perfectly

将索引放在节的前面会导致空的arr /节，因为这些节还没有执行。在mixins之后它运行正常，遗憾的是索引在页面末尾没有任何意义。

已经考虑了一个脏的setTimeout来等待编译的部分。但这似乎无法呈现实际的标记：

mixin index()
    - 
      setTimeout(function(){
        console.log(arr) // works fine, full array is looged
        ul // doesn't render anything at all
          each item in arr
             li= item 
      },500)

如何解决这个问题？

Answer 1

有趣的问题！据我所知，这对于您提出的过程是不可能的，因为Pug文件（以及许多其他标记语言中的文件）通常按顺序/从上到下进行评估，而不是并行评估。

我能想到的一个解决方案是拆分数据定义和数据使用步骤：首先，在文件的开头，定义完整的对象数组，然后稍后使用{{迭代该数组1}}和+index命令。另一种解决方案可能是在其他地方定义该数组（例如，在可以在脚本中加载的JSON / YAML文件中调用这些文件上的编译器）。然后，您可以通过上下文变量将加载的数组传递给此模板。

这两种解决方案都不理想，但确实可以解决问题。