Welcome to Dust! The exercises in this tutorial will help you get familiar with Dust’s core features and syntax. To complete the exercises, edit the “Dust Template” or “Data” so that the “Output” matches the “Expected Output”.

Writing Templates

References

The first thing to learn is how to reference your data using Dust. You will learn below how to tell Dust what data to use, but for now the exercises will handle that for you. A reference in Dust is written by surrounding a JSON key with a single set of curly braces ({key}). In the introductory exercise below, we welcome you to Dust, but the greeting is a bit too formal.

Welcome to Dust, {name}. { "name": "friend", "familiarName": "pal" } Welcome to Dust, pal.

References with dot-notation (AKA paths)

If you need to reference values within nested objects, you can use dot-notation the same way you would in JavaScript.

Hello, {name} { "name": "Ned", "amigo": { "name": "Dusty" } } Hello, Dusty

Learn more about Dust References.

Conditionals

Dust can include content conditionally with ? (exists) and ^ (not exists). Given a reference, the conditionals check if the value of that reference is truthy or falsy, then output the content accordingly.

<input type="checkbox"{?isSelected} selected{/isSelected}> {?friends} {friends.length} Friends!{/friends} {?enemies} Oh no, enemies!{/enemies} { isSelected: false, friends: ["Alice", "Bob"], enemies: ["Oscar"] } <input type="checkbox" selected> 2 Friends!

You can also use an {:else} statement with conditionals.

<li class="result{?isPrimary} primary{:else} secondary{/isPrimary}"> { isPrimary: true } <li class="result secondary">

Truthiness

Dust uses a slightly different definition of truthiness than Javascript. The only non-truthy values for the purpose of conditional tests are null, undefined, and an empty Array. Values like the string “false”, the number 0, and empty Objects are considered truthy. If you need test for these values, look at the Dust {@eq} and {@ne} helpers.

Sections

Sections, which work a lot like conditionals, are a useful alternative to the sometimes verbose dot-notation. A section is used to switch the context in which Dust looks up references.

In the example below, the section begins with {#friend} and ends with {/friend}. While inside of the {#friend} section, Dust looks for references inside of the friend object. That’s why the output is Hello, Jacob instead of Hello, John.

Hello, {#friend}{name}{/friend}. { "name": "John", "nickname": "Jingleheimer Schmidt", "friend": { "name": "Jacob" } } Hello, John Jacob.

However, if Dust doesn’t find a reference in a given context, it will look into all of the data’s parent contexts before it gives up.

Hello, {name} {#friend}{name} [[ PUT YOUR ANSWER HERE ]]{/friend}. That's my name, too. { "name": "John", "nickname": "Jingleheimer Schmidt", "friend": { "name": "Jacob" } } Hello, John Jacob Jingleheimer Schmidt. That's my name, too.

Looping

Looping in Dust is easy. In fact, a loop is just a section where the reference of the section is an array.

Inside a loop, you can use {.} to reference the current item and the special references {$idx} and {$len} to show the index of the current item and the length of the array, respectively.

<ul> {#languages}<li>[[ YOUR CODE GOES HERE ]]</li>{/languages} </ul> { "languages": [ "HTML", "CSS", "JavaScript", "Dust" ] } <ul><li>HTML</li><li>CSS</li><li>JavaScript</li><li>Dust</li></ul>

When an array contains objects, you can access the properties inside the object by name.

<ul> {#languages} <li>[[ INSERT LANGUAGE NAME HERE ]] by {#creators}{.}{@sep} and {/sep}{/creators}</li> {/languages} </ul> { "languages": [ { "name": "HTML", "creators": ["Tim Berners Lee"] }, { "name": "CSS", "creators": ["Håkon Wium Lie", "Bert Bos"] }, { "name": "JavaScript", "creators": ["Brendan Eich"] }, { "name": "Dust", "creators": ["akdubya"] } ] } <ul><li>HTML by Tim Berners Lee</li><li>CSS by Håkon Wium Lie and Bert Bos</li><li>JavaScript by Brendan Eich</li><li>Dust by akdubya</li></ul>

Now that you know the basics of writing Dust templates, continue on to learn how to compile and render your templates!


Fork me on GitHub