Compiling Jade partial with different data

Question

I am using gulp to compile Jade for a static website. There is a single gulp task that compiles all the jade files into HTML files.

I am creating a 10 step process, each a single page of HTML with "previous" and "next" buttons

I want to create a partial like below

a(href="#{prev}") Back
a(href="#{next}") Continue

For each page, the prev and next values change. Is there a way to call the partial from within each page's jade with custom prev and next values?

I am assuming, like how you bind data in handlebars template and compile, I can have a different locals object for each page and render the same partial with different data.

Am I approaching this wrong or is this something possible with jade? All answers I can see are related to using express with Jade. I'm only creating a static website, just the HTML alone infact.

Answer 1

If you're including the partial within larger Jade templates via include then it's simply a matter of changing the locals for the larger template you're rendering.

gulp.src('./templates/template-that-includes-a-partial.jade')
  .pipe(gulpJade({
    locals: {
      prev: 'some value',
      next: 'some other value'
    }
  })
  .dest('./build/templates/');

Something like that should work. The partial view should have access to the same locals as the parent view that includes it.

Answer 2

I found out that you can define Jade variables using - in the parent template and call the partial with this data

- var prev = "a.html"
- var next = "b.html"

include partials/_var

And then use interpolation in the partial to use corresponding values

a(href="#{prev}") Prev
a(href="#{next}") Next

This way, I can call the same partial in different parent templates but pass in varying values for each page.