Wąsy (lub Kierownice) powtarzanie ciągu dwóch list

Question

Mam dwie tablice:

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

i szablon:

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

chciałbym końcowy wynik będzie:

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

Próbowałem wąsów blokowych takich jak {{#girls}} {{.}} {{/girls}} i {{#digits}} {{.}} {{/digits}}, ale bez względu na to, w jaki sposób je zagnieżdżam, wydaje mi się, że się powtarzam ats zamiast przeplatać.

Jakieś pomysły?

PS: Oczywiście w przyszłości będziemy prosić o adresy IP, a nie numery telefonów.

PPS: Żadne z nich nie ma być rzeczywistym adresem IP, proszę nie próbować kontaktować się z tymi dziewczynami!

Answer 1

Musisz zmienić układ swojego content, aby można było przetworzyć tylko jedną rzecz. Jeśli połączyć te dwie tablice z czymś tak:

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

Następnie szablon tak:

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

powinno działać.

Answer 2

Z poradą "mu jest za krótka". I kilka szalonych pomysłów wymyśliło ciekawe podejście do złożonych szablonów. * To prawie działa!

Więc powiedzmy, że mam tę zawartość (lub dane lub widok), które chcę umieścić w szablonie:

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

I mam szablonu takiego:

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

A Końcowy wynik, który chcę, to:

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

Problem, który napotkamy, polega na tym, że mamy tablice (lub listy) zagnieżdżone w naszym oryginalna treść, a jeśli spróbujemy użyć Mustache.render (html, content), otrzymamy tylko jeden element li lub całą tablicę w ramach jednego atrybutu href = "". Tak smutno ...

Jest on tym podejściem, wielokrotnie przechodzi przez szablon. Za pierwszym razem przejrzyj i wymień elementy najwyższego poziomu i dostosuj szablon do następnego przejścia. Za drugim razem dostosuj jedną z list i dostosuj szablon do trzeciego przejścia, itd., Ile kiedykolwiek masz warstw. Oto nowy szablon wyjścia:

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

Na pierwszym przejściu przez wypełnienie najwyższego poziomu rzeczy, a zmiana cyfry {{}} na {{.}}

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

Teraz masz to:

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

Na następnym przejściu przez my właśnie nazywamy Mustache.render (Template2, content.digits); i to powinno nam dać:

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

I tam umiera moja logika, haha. Jakakolwiek pomoc, myśląc, że to się skończy! Myślę, że mógłbym usunąć elementy blokujące {{hair}} i po prostu zrobić $ .each przejść przez content.girls i stack .replace trzy razy. Mogę też spróbować zacząć od najniższego poziomu treści i pracować na swój sposób. Nie wiem.

Wszystko to zasadniczo sprawia, że ​​zastanawiam się, czy istnieje sposób "bezkolizyjny" dla tego rodzaju zagnieżdżania lub wielokrotnych przejść do wąsów, czy robią to kierownicy?