Question

I’m having trouble rendering a simple table using dust.js

This template:

<table>
    {#hours}
    <tr>
        <td>{dayText}</td>
        <td>{hoursText}</td>
    </tr>
    {/hours}
</table>

Outputs:

<table>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

Whereas changing the template to an unordered list works just fine:

<ul>
    {#hours}
    <li>{dayText}&nbsp;{hoursText}</li>
    {/hours}
</ul>

Here is the model:

{
hours: [
    {dayText: "Mo-Fri ", hoursText: "11:00-22:00"},
    {dayText:"Sat", hoursText: "12:00-22:00"},
    {dayText:"Sun", hoursText: "12:00-21:00"}
    ]
}

The templates are compiled in browser using dust-full-1.1.0.js
I’m using the LinkedIn fork.

Have I found a bug or have I missed something?

Answer 1

I have found the cause of my problem. My template sources are loaded from the within the page:

$("#dust-templates").children().each(function() {
        var compiled = dust.compile($(this).html(), $(this).attr('id'));
        console.log(compiled);
        dust.loadSource(compiled);
    })

The problem is that the browser does not deliver the template html verbatim:

{#hours}

{/hours}
<table>
<tbody><tr>
    <td>{dayText}</td><td>{hoursText}</td>
    </tr></tbody>
</table>

So it is not strange that this does not work as expected. If I store the template as a javascript variable it works.