Question

I am new to Dust.js and am trying to iterate a JSON object with records and render each of them into a row within a table. Below is the script, I am using to render the table, but am running into issues, I guess while rendering, especially the template argument of the render function. Appreciate if I could be pointed in the right direction

<div id="dustPlaceholder"></div>  
    <script id="goalTemplate">
        <table id="dustGoals">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Age</th>
                </tr>
            </thead>
            <tbody>
                {#friends}
                <tr>
                    <td>{name}</td>
                    <td>{age}</td>
                </tr>
                {/friends}
            </tbody>
        </table>
    </script> 
    </div>

     <script type="text/javascript">
         var src = document.getElementById("goalTemplate").innerHTML;
         var compiled = dust.compile(src);
         dust.render("goalTemplate", { friends: [ { name: "Moe", age:  37}]}, 
         function(err, out) {
          document.getElementById('dustPlaceholder').innerHTML = out;
        });   
     </script>

Answer 1

You need to include the entire Dust.js library if you are going to be rendering on the client, so you need to include the dust-full-0.3.0.min.js. Additionally,

<script src="dust-full-0.3.0.min.js"></script>

Also, what is “goalTemplate”?

Also what are you compiling? There are no variables in there. You need to compile the actual HTML – the content in the DIV tag. So everything including the div tags belong in the src variable.

Also, you must assume a name to the compiled template so it can be accessed. I’m really confused what you were doing before, but this example should work:

<script src="dust-full-0.3.0.min.js"></script>
<script type = "text/javascript">
var source = "<div id="dustPlaceholder"></div>  
    <script id="goalTemplate">
        <table id="dustGoals">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Age</th>
                </tr>
            </thead>
            <tbody>
                {#friends}
                <tr>
                    <td>{name}</td>
                    <td>{age}</td>
                </tr>
                {/friends}
            </tbody>
        </table>
    </script> 
    </div>";

     var compiled = dust.compile(src, goalTemplate);
     dust.render("goalTemplate", { friends: [ { name: "Moe", age:  37}]}, 
     function(err, out) {
      document.getElementById('dustPlaceholder').innerHTML = out;
    }); 
     </script>