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>

应该有用。

Answer 2

“mu太短”的建议。还有一些疯狂的想法，我想出了一个复杂模板的有趣方法。 *它几乎可以工作！

所以，假设我有这个内容（或数据或视图），我想将其放入模板中：

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和堆栈.replace进行三次$ .each传递。或者我可以尝试从最低级别的内容开始，然后继续努力。我不知道。

所有这些基本上让我想知道是否有一些“逻辑少”的方式来进行这种嵌套或多次传递被放入小胡子做把手吗？

小胡子（或Handlebars）迭代两个列表

2 个答案: