Search code examples
dust.js

how to use dust partial template files (.tl files)


I have few questions on partials and overriding templates. For that i used the following folder structure.

projectRoot

   dust-core-0.6.0.min.js
   jquery.js
   test.html
   partial.tl
   main_without_override.tl

The content of partial.tl:

{+greeting} Hola {/greeting}

{+world} World {/world}

The content of main_without_override.tl:

{>partial/}

The content of test.html:

<!DOCTYPE html>
<html>
  <head>
    <script src="dust-core-0.6.0.min.js" type="text/javascript"></script>
    <script src="jq.js" type="text/javascript"></script>
  </head>
  <body>
  </body>
  <script>
    $.get('main_without_override.tl', function(){
        console.log(arguments);
    })
  </script>
</html>

In the index.html when i try to get the main_without_override.tl its saying 404. But im sure that the file is there. The path that firebug is showing is correct.But browser says 404.

I want to know

  1. How to get this main_without_override.tl
  2. Apply templating for main_without_override.tl and render in the browser.

I searched in google most of the examples give only the syntax. Can somebody help me in rendering the main_without_override.tl template.


Solution

  • You can include your dust template as a JavaScript file by using <script> tag, but you need to compile it first, which is explained here

    Then add following templates (scripts) to test.html:

        <script type="text/javascript" src="partial.js"></script>
        <script type="text/javascript" src="main_without_override.js"></script>
    

    And in you JavaScript render the template by dust.render method:

        dust.render('main_without_override', your_json_object, function(err, out){
    
            your_dom_element.innerHTML = out;
    
        });
    

    Related question: how to use dustjs-linkedin as client side templating?