Using mixins in Jade
Similar to partial templates in other template languages, Jade mixins are smaller template pieces that can accept parameters. Mixins are useful when generating common HTML chunks such as alert boxes, dialogs, and menus.
In this recipe we're going to compare Jade's mixins with the partial templates found in the other template languages by reimplementing the threaded conversation template. This is a recursive template that renders a threaded conversation tree.
Getting ready
We need to download jade.min.js
in our recipe
folder, available at https://github.com/visionmedia/jade.
How to do it...
Let's get started.
Create
index.html
which will contain the conversation placeholder, the main conversation template, and the recursive partial thread template:<!DOCTYPE HTML> <html> <head> <title>Mixins in Jade</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="list" class="conversation"> </div...