胡须（或把手）迭代过两个列表

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}}这样的块胡子，但是不管我用哪种方式将它们嵌套起来，我似乎都会重复ats而不是隔行扫描。

任何想法？ 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> 

在第一遍在顶层的东西通过填充和变化{{数字}}到{{。}}

$.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（模板2，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}}块元素，只需做一次$ .each遍历content.girls并堆栈。替换三次。或者我可以尝试从最低水平的内容开始，并努力工作。我不知道。

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