title: How to iterate over nested objects using Handlebars
body: <p>I would like to know how to iterate over the following data object using handlebars.</p>
  
  <p>Here is what it outputs:</p>
  
  <pre><code>image2.png | title2 
  image3.png | title3 
  </code></pre>
  
  <p>What I would like to achieve:</p>
  
  <pre><code>image1.png | title1
  image2.png | title2 
  image3.png | title3 
  </code></pre>
  
  <p>Data</p>
  
  <pre><code>var data = {
    "item": [{ // item with one image
        "src" : "image1.png",
        "title" : "title1"
    }],
    "item": [{ // item with two or more images
        "src" : "image2.png",
        "title" : "title2"
    },
    {
        "src" : "image3.png",
        "title" : "title3"
    }]
  }
  
  var template = Handlebars.compile($("#data-template").text());
  var html = template(data);
  $('#placeholder').html(html);
  </code></pre>
  
  <p>Template</p>
  
  <pre><code>&lt;div id="placeholder"&gt;&lt;/div&gt;
  &lt;script type="text/x-handlebars" id="data-template"&gt;
      {{#item}}
         {{src}} | {{title}} &lt;br&gt;
      {{/item}}
  &lt;/script&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/88CwB/" rel="nofollow">http://jsfiddle.net/88CwB/</a></p>