bigote (o Manillares) iterar sobre dos listas

Question

Tengo dos matrices:

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

y una plantilla:

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

Me gustaría que el resultado final sea:

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

He intentado bigotes bloqueados como {{#girls}} {{.}} {{/girls}} y {{#digits}} {{.}} {{/digits}}, pero no importa en qué camino los ande, parece que recibo repe ats en lugar de entrelazarse.

¿Alguna idea?

PD: Obviamente, en el futuro pediremos las direcciones IP, no los números de teléfono.

PPS: ¡Ninguno de ellos está destinado a ser IP reales, por favor no trates de contactar a esas chicas!

Answer 1

Debe reorganizar su content para que pueda repetir una sola cosa. Si se combinan estas dos matrices con algo como esto:

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

A continuación, una plantilla como esta:

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

debería funcionar.

Answer 2

Con el consejo "mu es demasiado corto". Y algunas ideas locas, se me ocurrió un enfoque interesante para la creación de plantillas complejas. * ¡Casi funciona!

Digamos que tengo este contenido (o datos o vista) que quiero poner en una plantilla:

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

Y tengo una plantilla como esta:

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

Y el resultado final que quiero es éste:

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

El problema que encontraremos es que tenemos matrices (o listas) anidados en nuestra contenido original, y si intentáramos con Mustache.render (html, content) terminaríamos con solo un elemento li o una matriz completa dentro de un atributo href = "". Tan triste ...

Así que él es el enfoque, pasar a través de la plantilla varias veces. La primera vez, pase y reemplace los elementos de nivel superior, y ajuste la plantilla para el siguiente pase. La segunda vez, ajuste una de las listas, y ajuste la plantilla para la tercera pasada, etc., para ver cuántas capas de contenido tiene. Aquí está la nueva plantilla de partida:

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

En la primera pasada a través de rellenar el material de primer nivel, y el cambio dígitos {{}} {{a.}}

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

Ahora usted tiene esto:

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

En el paso siguiente a través sólo tendremos que llamamos Mustache.render (Template2, content.digits); y eso debería darnos:

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

Y ahí es donde mi lógica muere, jaja. ¡Cualquier ayuda pensando en esto sería rockero! Estoy pensando en sacar los elementos del bloque {{hair}} y hacer un pase de $ .each a través de content.girls y stack .replace tres veces. O podría intentar comenzar con el nivel más bajo de contenido y subir de nivel. No se.

Todo esto, básicamente, me hace preguntarme si hay alguna manera "lógica" para que este tipo de anidación o múltiples pasadas se pongan en el bigote, ¿lo hacen las barras del manillar?