title: Mustache (or Handlebars) iterating over two lists
body: <p>I have two arrays:</p>
  
  <pre><code>var content = {
    "girls": ["Maria", "Angela", "Bianca"],
    "digits": ["21.143.191.2", "123.456.78.90", "971.6.17.18.1"]
  };
  </code></pre>
  
  <p>and a template:</p>
  
  <pre><code>&lt;script id="template" type="text/template"&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="{{digits}}"&gt;{{girls}}&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>I'd like the end result to be:</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li&gt;&lt;a href="21.143.191.2"&gt;Maria&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="123.456.78.90"&gt;Angela&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="971.6.17.18.1"&gt;Bianca&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I've tried block mustaches like <code>{{#girls}} {{.}} {{/girls}}</code> and <code>{{#digits}} {{.}} {{/digits}}</code> but no matter which way I nest them I seem to get repeats instead of interlacing.</p>
  
  <p>Any Ideas?</p>
  
  <p>PS: Obviously in the future we'll be asking for IP addresses, not phone numbers.</p>
  
  <p>PPS: None of those are intended to be real IPs, please don't try to contact those girls!</p>