Undefined variable inside 'each' in Handlebars.js

Question

I have a render function:

renderTracksList = function(tracks){ var source = $("#timeline-template").html(); var template = Handlebars.compile(source); var data = { tracks: tracks, client_id: App.config.client_id }; var html = template(data); $('#timeline').html(html); } 

And in my template I try to use print client_id inside the loop, but in the context of the loop it is undefined, so how to access and print the variable?

 {{#each tracks}} <div class="track"> {{title}} - <a href="javascript:App.play('{{permalink_url}}')">PLAY</a> {{#if downloadable}} - <a href="{{download_url}}?client_id={{client_id}}" target="_blank">DOWNLOAD</a> {{/if}} </div> {{/each}} 

Btw, I already tried this:

 <a href="{{download_url}}?client_id={{../client_id}}" target="_blank">DOWNLOAD</a> 

Answer 1

Try repeating ../ for {{#if}} and {{#each}} :

 <a href="{{download_url}}?client_id={{../../client_id}}" target="_blank">DOWNLOAD</a> 

Despite the fact that {{#if}} retains the value of the previous context, it still creates another entry on the stack, which ../ moves backward.