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>
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>