Using the dust.js javascript templating engine, I want to pass an array directly:

var templateContents; //loaded by require.js
var piled = dustpile(templateContents, "viewElements");
dust.loadSource(piled);
dust.render("viewElements", ["bob", "joe", "sue"], function(err, out){
    $('#view').html(out);
});

How do I create a template file to handle an array directly? I've tried a number of things including:

{.}<br>

and

{#.}
 {.}
{/.}

But can't seem to reference the array or the elements in it correctly. The first example prints: [object Object]

I could name each array that I pass in, but what I'm trying to avoid having to do that as the arrays are actually ing from backbone collections and it seems like extra work to do so.

Using the dust.js javascript templating engine, I want to pass an array directly:

var templateContents; //loaded by require.js
var piled = dust.pile(templateContents, "viewElements");
dust.loadSource(piled);
dust.render("viewElements", ["bob", "joe", "sue"], function(err, out){
    $('#view').html(out);
});

How do I create a template file to handle an array directly? I've tried a number of things including:

{.}<br>

and

{#.}
 {.}
{/.}

But can't seem to reference the array or the elements in it correctly. The first example prints: [object Object]

I could name each array that I pass in, but what I'm trying to avoid having to do that as the arrays are actually ing from backbone collections and it seems like extra work to do so.

• javascript
• dust.js

• 2 The second one: {#.}{.}<br>{/.} seems to work for me. – Trevor Commented Jun 19, 2012 at 22:47
• @Trevor I just checked again, and I'm getting [object Object] as the output for that code snippet. :( – Will Shaver Commented Jun 20, 2012 at 15:48
• I know I can have caching problems with requirejs. Try clearing your cache and make sure its loading the right template. – Trevor Commented Jun 20, 2012 at 16:34
• Thanks @Trevor I put a longer explanation below. – Will Shaver Commented Aug 15, 2012 at 21:12
• For other people using dust/require.js I made a shim to make it easier: github./wshaver/speck – Will Shaver Commented Aug 15, 2012 at 21:13

2 Answers 2

I'm not sure exactly what was going wrong with one of the things I tried in the original question, but thanks Trevor for pointing this out.

dust.render("viewElements", ["bob", "joe", "sue"], function(err, out){
    $('#view').html(out);
});

This will work with this:

{#.}{.}<br>{/.}

If you've got an array of objects:

dust.render("viewElements", [{name:"bob"}, {name:"joe"}, {name:"sue"}],
    function(err, out){
        $('#view').html(out);
    });

You can render them by referencing the name property on the . element:

{#.}{.name}<br>{/.}

Or directly:

{#.}{name}<br>{/.}

This answer may be too late :)

This code seems to work for me (passed the array as data object to the template while rendering):

var piled = dust.pile("{#data}{.}<br>{/data}", "viewElements");
        dust.loadSource(piled);
        var arr = ["bob", "joe", "sue"];
        dust.render("viewElements", {"data" : arr}, function(err, out){
            $('#content').html(out);
        });