I am trying to create view with 2 blocks. Each block had different real time data source. When I use Jade`s include within main view, :

extends ../layout

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

I get error

Cannot read property 'people' of undefined.

The reason is because the data is still loading. If exclude that include and instead in function that revives data use

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

The template is not added to the view.

How to add 2 or more partial views with dynamic data from different sources to 1 view? Thank you

I am trying to create view with 2 blocks. Each block had different real time data source. When I use Jade`s include within main view, :

extends ../layout

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

I get error

Cannot read property 'people' of undefined.

The reason is because the data is still loading. If exclude that include and instead in function that revives data use

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

The template is not added to the view.

How to add 2 or more partial views with dynamic data from different sources to 1 view? Thank you

• javascript
• node.js
• pug
• partials

2 Answers 2

You can achieve this with 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/language/mixins.html

In jade the syntax is slightly different then in pug 2.

After extensive research, Pug/Jade Template engine does not support dynamic template rendering or usage of multiple partials within one view. Handlebars was remended for this scenario.