Mustache（或Handlebars）如何迭代两个列表？

Question

Mustache（或Handlebars）如何迭代两个列表？

7

我有两个数组：

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}}这样的块级胡须，但无论我如何嵌套它们，我似乎总是得到重复而不是交错。

有什么想法吗？

附：显然在将来我们将要求IP地址，而不是电话号码。

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

- Costa Michailidis

2个回答

3

在"mu is too short"的建议和我自己的一些疯狂想法的帮助下，我想出了一种有趣的复杂模板解决方案。*它几乎可以工作！

假设我有这个要放入模板中的内容（或数据或视图）：

var content = {
  title: "Black Book",
  girls: ["blonde", "brunette", "redhead"],
  digits: ['123', '456', '789'],
  calc: function () {
    return 2 + 4;
  }
};

我有一个类似这样的模板：

<script type="text/template" id="template">
  <h1>{{title}}</h1>
  <h3>{{calc}}</h3>
  <ul>
    <li><a href="{{digits}}">{{hair}}</a></li>
  </ul>
</script>

我想要的最终结果是这样的：

  <h1>Black Book</h1>
  <h3>6</h3>
  <ul>
    <li><a href="123">blonde</a></li>
    <li><a href="456">brunette</a></li>
    <li><a href="789">redhead</a></li>
  </ul>

我们将遇到的问题是原始内容中嵌套了数组（或列表），如果我们尝试使用Mustache.render(html, content)渲染，我们最终只会得到一个li项或一个完整的数组在一个href=""属性内。太遗憾了...

所以这里的方法是多次通过模板。第一次，通过并替换顶级项，并调整下一次通过的模板。第二次，调整其中一个列表，并调整第三次通过的模板，等等，直到您拥有的内容层数。这是新的起始模板：

<script type="text/template" id="template">
  <h1>{{title}}</h1>
  <h3>{{calc}}</h3>
  <ul>
    {{#hair}}
    {{#digits}}
    <li><a href="{{digits}}">{{hair}}</a></li>
    {{/digits}}
    {{/hair}}
  </ul>
</script>

第一次遍历时，填写顶级内容，并将{{digits}}更改为{{.}}

$.each(content, function (index, value) {
    template2 = template.replace(/{{title}}/ig, content.title)
                   .replace(/{{calc}}/ig, content.calc)
                   .replace(/{{digits}}/ig, '{{.}}');
});

现在你有这个：

  <h1>Black Book</h1>
  <h3>6</h3>
  <ul>
    {{#hair}}
    {{#digits}}
    <li><a href="{{.}}">{{hair}}</a></li>
    {{/digits}}
    {{/hair}}
  </ul>

在下一次通过时，我们只需调用 Mustache.render(template2, content.digits); ，这样就可以得到以下结果：

  <h1>Black Book</h1>
  <h3>6</h3>
  <ul>
    {{#hair}}
    <li><a href="123">{{hair}}</a></li>
    <li><a href="456">{{hair}}</a></li>
    <li><a href="789">{{hair}}</a></li>
    {{/hair}}
  </ul>

我的逻辑到这里就停滞了，哈哈。如果有帮助思考的话，那就太好了！我想我可以去掉{{hair}}块元素，只需通过content.girls进行$.each遍历并堆叠.replace三次。或者我可以尝试从最低级别的内容开始，逐步向上工作。我不知道。

所有这些基本上让我想知道是否有一种“无逻辑”的方式来处理这种嵌套或多次遍历，以便在mustache中处理它吗？

- Costa Michailidis

我仍然认为在JavaScript中重新排列数据更容易 :) - mu is too short

没错，这里不需要重复造轮子。你知道什么会很棒吗？如果你可以在花括号内使用点符号表示法。 - Costa Michailidis

1

现在mustache中提到了点符号表示法，请参见https://github.com/janl/mustache.js并搜索“点符号表示法”。 - Tyler Collier

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- mu is too short · Accepted Answer

您需要重新排列您的内容，以便您可以仅迭代一个内容。如果您使用以下方式将这两个数组组合起来：

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>

应该可以工作。