javascript - Jade/Pug 中带有动态数据的部分模板

Question

我正在尝试用 2 个 block 创建 View 。每个 block 都有不同的实时数据源。当我在主视图中使用 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 });

模板没有添加到 View 中。

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

Answer 1

您可以使用 mixins 实现这一点。

layout.pug

doctype html
html
  head
    ...
  body
    block content

pets-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)

https://pugjs.org/language/mixins.html

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