小胡子（或把手）迭代两个列表 [英] Mustache (or Handlebars) iterating over two lists

问题描述

我有两个数组：

I have two arrays:

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

和模板：

and a template:

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

我希望最终结果为：

I'd like the end result to be:

<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}} 我以哪种方式嵌套他们我似乎得到重复，而不是交错。

I've tried block mustaches like {{#girls}} {{.}} {{/girls}} and {{#digits}} {{.}} {{/digits}} but no matter which way I nest them I seem to get repeats instead of interlacing.

任何想法？

PS：显然将来我们会询问IP地址，而不是电话号码。

PS: Obviously in the future we'll be asking for IP addresses, not phone numbers.

PPS：这些都不是真正的IP地址，请不要尝试联系这些女孩！

PPS: None of those are intended to be real IPs, please don't try to contact those girls!

推荐答案

您需要重新排列您的内容可以迭代一件事。如果你将这两个数组合并为类似的东西：

You need to rearrange your content so that you can iterate over just one thing. If you combine those two arrays with something like this:

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

然后是这样的模板：

Then a template like this:

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

应该有效。

这篇关于小胡子（或把手）迭代两个列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！