Jade/Pug 中包含动态数据的部分模板

Question

我正在尝试创建包含 2 个块的视图。每个块都有不同的实时数据源。当我在主视图中使用 Jade 的 include 时，：

extends ../layout

block content
 link(rel='stylesheet', type='text/css', href='/stylesheets/people.css')
 include ../store/peopleTemplate.pug

我收到错误

Cannot read property 'people' of undefined.

原因是数据还在加载中。如果排除那个 include 而不是在恢复数据的函数中使用

res.render(template, {  data:localData });

模板未添加到视图中。

如何将来自不同来源的动态数据的 2 个或更多局部视图添加到 1 个视图？谢谢

Answer 1

经过广泛的研究，Pug/Jade 模板引擎不支持动态模板渲染或在一个视图中使用多个部分。在这种情况下，建议使用车把。

Answer 2

您可以使用 mixins 实现此目的。

layout.pug

doctype html
html
  head
    ...
  body
    block content

宠物-partial.pug

mixin petslist(pets)
  ul
    each pet in pets
      li #{pet}

pets.pug

extends layout

include pets-partial

block content
  h1 Dogs
  +petslist(dogs)

  h1 Cats
  +petslist(cats)

jade 中的语法与 pug 2 中的语法略有不同。

Partial template in Jade/Pug with dynamic data