Handlebar template passing data

Question

I have the following handlebar template -

var homePage =
    '<div>' +
        '<div id="homepage">' +
            '<div class="header"><h1>Venues</h1></div>' +
            '<div class="scroller">' +
                '<ul class="list">' +
                '</ul>' +
            '</div>' +
        '</div>'
    '</div>';
var template = Handlebars.compile(homePage);

var venueList = 
    '<a href="#page1">' +
        '<li>' +
            '<div class="list-left">' +
                '<div class="list-profile"></div>' +
            '</div>' +
            '<div class="list-right">' +
                '<div class="list-title">{{name}}</div>' +
                '<div class="list-span">{{address.town}}, {{address.county}}</div>' +
            '</div>' +
            '<div class="clear"></div>' +
        '</li>' +
    '</a>';

I have a function that makes an AJAX call to get a list of venues. This populates var homepage using the var venueList as a template.

This all works as I would like it to and each venue is displayed in my UL. What I am having difficulty trying to understand is the next part of my process.

I allow the user to click on any of the venues. This will take them to the next page which will have more info about the venue they clicked. The function that I use for the AJAX call retrieves everything about the venue, not just the name. How am I best obtaining information for that given venue on the next page? Do I store an array of each venues information and pass this through dependent on the venue name the user clicks on? If so how best do I go about this?

I want to keep this using the template system handlebars gives me, and I am very, very new to this.

Edit

This is what I am using to create the sense of "pages" within my hybrid app

$(window).on('hashchange', route);

// Basic page routing
function route(event){
    var page,
        hash = window.location.hash;

    if(hash === "#page1"){

    }else{
        var template = Handlebars.compile(homePage);        
        page = template();
    }
}

Thanks

Answer 1

You could use a HTML data attribute to store the entire record for each item.

eg In your handlerbars template

replace

'< li >'

with '<li data-venuedetails={{this}} '

There are several approaches to the passing the data to the new page (session, query string, cookie etc) however without knowing too much about your project it may make sense to keep everything on the one page with sections showing/hiding bases on the user action. A wizard control might even work here.

Alternatively you can just make another Ajax call on the new page, if it's just for a single record there should be little overhard