javascriptnode.jspugpartials

Partial template in Jade/Pug with dynamic data

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

Solution

  • 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.org/language/mixins.html

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