multiple templates with handlebars.js

Question

I'm new to javascript and libraries so this might be a simple question. I'm trying to make a couple of simple web-pages using handlebars.js templating engine and jQuery. The problem I keep running into is making multiple pages. So far I have one main page with different names. Each name has a jquery click function on it. If I click a name I just use jQuery to change the current page. So basically, if you click a name you get a new template with a list of pictures for that person, but on the same page say index.html. The problem with this is that if you want to go back to the first view, the "back" button doesn't work now. Am I structuring this incorrectly? Should the link send to another page and another template? And if so how do I generate the template based on what link is pressed.

$(document).ready(function(){


var source = $(".some-template").html();
var template = Handlebars.compile(source);

data = { date: "today", firstUsers: [
{firstName: "person1", pictures: ["pic1", "pic2", "pic3"]},
{firstName: "person2", pictures: ["pic1", "pic2", "pic3"]},
{firstName: "person3", pictures: ["pic1", "pic2", "pic3"]},
{firstName: "person4", pictures: ["pic1", "pic2", "pic3"]},
]
};
$(".container").html(template(data))

$("li").click(function(){
    var name = $(this).html()
    $.each(data.firstUsers, function(i, item){
        if(name === item.firstName){
            y = item.pictures
            return y
        };//if function
    });//each function


    $(".container").hide()
    var source = $(".some-script").html();
    var template = Handlebars.compile(source);
    datas = {namer: name, pictures: y,}
    //console.log(datas.pictures)
    $(".content").html(template(datas))
});//click function
});//document ready

Answer 1

Using best practices, you should probably have URLs associated with each page. If you use window.history.pushState , there is a fairly easy way to get the back/forward buttons working.

So basically how it works is as follows:

1. Each time you load a new template, push a new browser state.
2. Listen for the onpopstate event, and load the appropriate template when it fires.

I'd separate your function above into two separate functions, for resusability:

function loadUser(name) {
    var y;
    $.each(data.firstUsers, function(i, item){
        if(name === item.firstName){
            y = item.pictures
            return y
        };//if function
    });//each function

    $(".container").hide()
    var source = $(".some-script").html();
    var template = Handlebars.compile(source);
    datas = {namer: name, pictures: y,}
    //console.log(datas.pictures)
    $(".content").html(template(datas))
    window.history.pushState(null, null, name);
}

// Find the name of the user
// TODO: change the regex to match your URL scheme
function popStateResponder() {
    var name = window.location.pathname.match(/\w+$/)[0];
    loadUser(name);
}

$("li").click(function(){
    var name = $(this).html(),

    loadUser(name);
});//click function

$(window).on('popstate', popStateResponder);

A few things may need to be changed, but this is the general workflow I use commonly for this kind of task.