Baffi (o manubri) l'iterazione più di due liste

Question

Ho due matrici:

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

e un modello:

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

mi piacerebbe che il risultato finale di essere:

<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> 

Ho provato baffi a blocchi come {{#girls}} {{.}} {{/girls}} e {{#digits}} {{.}} {{/digits}} ma non importa in che modo li annullo mi sembra di ottenere repe ats invece di interlacciamento.

Qualsiasi idea?

PS: Ovviamente in futuro chiederemo indirizzi IP, non numeri di telefono.

PPS: nessuno di questi è destinato a essere IP reali, per favore non provare a contattare quelle ragazze!

Answer 1

È necessario riorganizzare lo content in modo da poter scorrere su una sola cosa. Se si combinano questi due array con qualcosa di simile:

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

Poi un modello come questo:

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

dovrebbe funzionare.

Answer 2

Con il consiglio "mu è troppo corto". E alcune idee pazze mi hanno proposto un approccio interessante ai complessi modelli. * Funziona quasi!

Quindi diciamo che ho questo contenuto (o dati o vista), che voglio mettere in un modello:

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

E ho un modello come questo:

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

E il risultato finale che voglio è questo:

<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> 

Il problema che incontreremo è che abbiamo array (o liste) annidati nella nostra contenuto originale, e se provassimo a Mustache.render (html, contenuto) avremmo finito con un solo oggetto li o un intero array all'interno di un attributo href = "". Così triste ...

Quindi lui è l'approccio, passa attraverso il modello più volte. La prima volta, passa e sostituisci gli articoli di livello superiore e regola il modello per il passaggio successivo. La seconda volta, modifica uno degli elenchi e regola il modello per il terzo passaggio, ecc. Per quanto mai molti livelli di contenuti che hai. Ecco il nuovo modello di partenza:

<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> 

Al primo passaggio attraverso riempire la roba di alto livello, e il cambiamento {{cifre}} a {{.}}

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

Ora avete questo:

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

Al successivo passaggio attraverso ci limiteremo a chiamare Mustache.render (Template2, content.digits); e questo dovrebbe darci:

<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> 

Ed è qui che la mia logica muore, haha. Qualsiasi aiuto a pensare questo sarebbe rock! Sto pensando che potrei prendere gli {@ hair}} elementi del blocco e fare solo un $ .passare attraverso content.girls e fare stack .replace tre volte. O potrei provare ad iniziare con il livello più basso di contenuto, e aprirmi la strada. Non so.

Tutto questo fondamentalmente mi lascia chiedermi se c'è un modo "logico" per questo tipo di nidificazione o passaggi multipli per essere messi nei baffi che i manubri fanno?