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

时间:2016-07-27 19:44:44

标签: javascript node.js pug partials

我正在尝试使用2个块创建视图。每个块都有不同的实时数据源。当我在主视图中使用Jade`s 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.

原因是因为数据仍在加载。如果排除包括而不是在恢复数据的函数中使用

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

模板未添加到视图中。

如何使用来自不同来源的动态数据向1个视图添加2个或更多部分视图?谢谢

3 个答案:

答案 0 :(得分:4)

你可以用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)

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

在玉器中,语法与pug 2略有不同。

答案 1 :(得分:2)

经过广泛研究,Pug / Jade模板引擎不支持动态模板渲染或在一个视图中使用多个部分。建议在此方案中使用把手。

答案 2 :(得分:0)

我正在开发一个使用 PUG 执行此操作的 Node Js 网站。 PUG 返回一个流。该流必须转换为 HTML 内容。有用。我构建了一个带有智能数据绑定模块的 Ajax 模块,以便您得到一个类似 SPA 的站点。完成后,我将在 Github 上发布 javascript 文件。已经有验证也工作和后退按钮的历史。刚刚把三个测试项目放在一起。现在我想为它开发一个身份验证装饰器。