Node.js express, handlebars - get elements of an array

I have an array like this:

var arr = ["element1","element2"];

and I would like to get the elements of it in a handlebars file.

I googled with no result the only solution what i found is this:

{{#each files}}
<a href="/"{{path}}"">{{title}}</a>
{{/each}}

But this is not good for me because I would like to achive that all of my files in a directory could be downloadable.

The code what I tried on the server side:

app.get('/download',function(req,res){
var items;
fs.readdir('./download',function(err,files){
        items = files;
});

res.render('download',{
    files:items
});
});

And I don't know how to iterate on the client side to make all of the elements in the array downloadable.

On the clien side I have an unordered list which will contain the links. The problem is, that I have no idea how to achive that.

The code on the clien side:

<div id="container">
            <div class="highlight">
                <img src="img/highlight.png"></img>
                <p>A Click to download</p>
            </div>
            <ul>
                <li class="RoundedAll"><a href="/">Back</a></li>
            </ul>
            <br />
            <ul>
                <!-- What should I put here? -->
            </ul>
        </div>

Thanks for answers.

First of all, lets assume that your files:items is a handlebar'd array looking kinda like this.

{ files:['filenameOne.ext', 'filenameTwo.ext', 'filenameThree.exe'] };

Now when you've written this on the response and you want to loop over the array in handlebars.js this is how your HTML should look like, using your code.

<div id="container">
    <div class="highlight">
        <img src="img/highlight.png"></img>
        <p>A Click to download</p>
    </div>
    <ul>
        <li class="RoundedAll"><a href="/">Back</a></li>
    </ul>
    <br />
    <ul>
        {{#each files}}
        <li>{{this}}</li>
        {{/files}}
    </ul>
</div>

The <li>{{this}}</li> will contain the filename's that is contained within your list. To then access that you would have to make a <a> that links to a controller, app.get('/getActualFile', function(){ //serve the file here }); and then write the fetched file on the response.

Hope this points you in the right the direction and that the use of an iterator in handlebars is a bit more obvious.

I myself does not prefer handlebars but that is since i'm not used to it completely. I myself like this template-language for Node.js better, http://paularmstrong.github.com/swig/

It features a bit more "clear" syntax but is probably worse than handlebars considering the diffrent ways you can customize Handlebars.

in order to make this work how you have it coded you need a key:value pair.

var arr = {path: "element1", title: "element2"};

the following:

var arr = {path: "downloads/mynewdownload", title: "My New Download"};

{{#each arr}}
     <a href="/{{path}}">{{title}}</a>
{{/each}}

would yield:

    <div id="container">
        <div class="highlight">
            <img src="img/highlight.png"></img>
            <p>A Click to download</p>
        </div>
        <ul>
            <li class="RoundedAll"><a href="/downloads/mynewdownload">My New Download</a></li>
        </ul>
        <br />
    </div>

if you have multiple key value pairs they can be stored in an array and accessed the same way.

Try this:

<ul>
{{#each people}}
   <li>{{this}}</li>
{{/each}}
</ul>