小胡子(或Handlebars)迭代两个列表

Question

我有两个数组:

var content = {
  "girls": ["Maria", "Angela", "Bianca"],
  "digits": ["21.143.191.2", "123.456.78.90", "971.6.17.18.1"]
};

和一个模板:

<script id="template" type="text/template">
  <ul>
    <li><a href="{{digits}}">{{girls}}</a></li>
  </ul>
</script>

我希望最终的结果是:

<ul>
  <li><a href="21.143.191.2">Maria</a></li>
  <li><a href="123.456.78.90">Angela</a></li>
  <li><a href="971.6.17.18.1">Bianca</a></li>
</ul>

我已经尝试过块状胡须{{#girls}} {{.}} {{/girls}},{{#digits}} {{.}} {{/digits}}但无论我将它们嵌套在哪里,我似乎都会重复而不是隔行扫描.

有任何想法吗？

PS:显然将来我们会要求IP地址,而不是电话号码.

PPS:这些都不是真正的IP,请不要试图联系那些女孩!

Answer 1

您需要重新排列,content以便您可以迭代一件事.如果你将这两个数组合并如下:

var data = { girls: [ ] };
for(var i = 0; i < content.girls.length; ++i)
    data.girls.push({
        name:   content.girls[i],
        number: content.digits[i]
    });

然后像这样的模板:

<script id="template" type="text/template">
  <ul>
    {{#girls}}
      <li><a href="{{number}}">{{name}}</a></li>
    {{/girls}}
  </ul>
</script>

应该管用.