Search code examples
dust.jsdustc

how to precompile a dust template


dust-compiler -s controllers/inbox/views/inbox.dust -d    public/js/custom/inbox/messages.js

but i am getting error

 if (err) throw err;
               ^
Error: ENOTDIR, scandir 'C:\jbk\buy2gthr-master\controllers\inbox\views\inbox.dust'
    at Error (native)

i have inbox.dust file:

{>"../../../layout/layout"/}

 {<css-content}
 {/css-content}
 {<page-content}
 {/<page-content}
     <script id="entry-template" type="text/x-tmpl">
                  {title}
                    <ul>
                        {#data}
                        <li>{name}</li>{~n}
                        {/data}
                    </ul>
     </script>
**<div id="output"></div>**
 {/page-content}
 {<script-content}
 <script src='/js/custom/inbox/inbox.js'></script>
 <script src='https://cdnjs.cloudflare.com/ajax/libs/dustjs-linkedin/2.7.2/dust-full.js'></script>
  {/script-content}

and inbox.js file

$(document).ready(function () {
    var data = {
        "title": "Famous People", 
        "names" : [{ "name": "Larry" },{ "name": "Curly" },{ "name": "Moe" }]
    }

    var source   = $("#entry-template").html();
    var compiled = dust.compile(source, "intro");
    console.log(compiled);

    dust.loadSource(compiled);

    dust.render("intro", data, function(err, out) {
        if(err) console.log(err);
        else
        console.log(out);

        $("#output").html(out);
    });
});

still i am gettting

<div id="output"><ul></ul></div>

Solution

  • I'm not sure what dust compiler you're using, but just use dustc -- it comes with Dust.

    You can read about all the dustc API options, but to precompile a single file you'd do something like

    dustc controllers/inbox/views/inbox.dust --output=public/js/custom/inbox/messages.js
    

    dustc compiles templates using absolute names instead of relative ones, because Dust is not filesystem-aware. Unless you've specifically set up your dust.onLoad function to handle relative paths, you'll want to make your includes look something like {> "inbox/messages" /}.