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.
We need to download jade.min.js in our recipe folder, available at https://github.com/visionmedia/jade.
- Create
index.htmlwhich 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> <script id="thread-template" type="text/jade"> </script> <script id="template" type="text/jade"> mixin thread(thread) .message img(src=thread.image) span.name=thread.from span.date=thread.date p.text=thread.text .replies if thread.replies each reply in thread.replies +thread(reply) h2=thread.topic +thread(thread) p input(type="button",value="Reply") </script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript" src="jade.min.js"></script> <script type="text/javascript" src="example.js"></script> </body> </html> - Create
example.jsto pass the data to the template:$(function() { var template = jade.compile($('#template').html()); $('#list').html(template({ thread:{ topic: "The topic of this conversation", from: 'John', image: '1.png', text: "I wrote some text", date: 'Yesterday', replies:[ {from: 'Jack', image: '2.jpg', text: "My response to your text is favorable", date: 'Today' , replies: [ {from: 'John', image: '1.png', text: "Thank you kindly", date: 'Today'} ]}, {from: 'Jenny', image: '3.jpg', text: "I'm also going to chime in", date: 'Today' } ]}})); }); - Create
style.cssto style the conversation thread:* { box-sizing: border-box; } .conversation { width: 70ex; } .message { background-color:#f5f5f5; padding: 5px; margin:5px 0; float:left; clear: both; width:100%; } .message p { margin: 0 0 0.5em 0; } .message .name { font-weight: bold; } .message img { float: left; margin-right: 1em} .message.unread { font-weight:bold; } .message .date { margin-left:1em; float: right; font-style: italic; color: #999; } .replies { margin-left:3em; clear:both; }
The message thread is a recursive data structure. It contains the message details (such as date, user, and text) and also the replies which are themselves message threads.
To render this structure we wrote a Jade mixin. The mixin takes the thread as an argument and displays its attributes as well as the text in the top node of the thread.
Finally, if there are replies inside the thread object, it iterates through all of those replies and recursively calls itself with each reply as an argument. Calling a mixin is done by prefixing the mixin name with the character "+".
The main template displays the topic of the top level message in a heading. Afterwards it invokes the mixin with the top level thread which results in the rendering of the complete thread tree.