title: multiple templates with handlebars.js
body: <p>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. </p>
  
  <pre><code>$(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
  </code></pre>