Search code examples
javascripttemplatesnode.jsdust.js

Escape Dust.js Tag


TLDR; skip to the bottom paragraph for the main question.

I'll try to keep this nice and concise by leaving out why I want to do this, and the context surrounding it. But as a minimum, I have Node.js running on the back-end, rendering out every view using Dust.js.

Then I also have a client-side copy of Dust which dynamically renders interface elements as needed. When this goes into production, I'll pre-compile all of my client-side Dust templates, and avoid this problem completely. However, during development, testing would be much simpler if I could keep my templates inside of DOM elements. However, these "sub-templates" get mangled because the tags intended for use in client-side templates get filled with null values (because I failed to provide them to the server-side renderer).

Say I have this template:

<!DOCTYPE html>
<html>
<head>
    <title>{title}</title>
</head>
<body>
    <div id="some_template_to_be_rendered_client_side">
        <p>{description}</p>
    </div>
</body>
</html>

I would like the {title} template tag to be filled in by the Node.js Dust when the template is rendered out, but I'm looking for a way to escape the {description} tag so that I can dynamically compile and render template on the client-side using the HTML within the div as the template.


Solution

  • There are special escape tags that you can use to escape a raw { or } in dust. They are {~lb} and {~rb}.

    E.g.

    {~lb}hello{~rb}
    

    would render as

    {hello}