口ひげ（またはハンドル）二つのリスト

Question

の繰り返し処理私は2つの配列があります。

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

とテンプレート：

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

：

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

を私はあることを最終的な結果が欲しいです

私は{{#girls}} {{.}} {{/girls}}と{{#digits}} {{.}} {{/digits}}のようなブロックの亀頭を試しましたが、どのようにそれらを入れ子にしても、私はリピートを受けるようですインタレースの代わりにats。

すべてのアイデア？

PS：将来的には電話番号ではなくIPアドレスを求めていることは明らかです。

PPS：実際のIPを意図したものはありません。それらの女の子に連絡しないでください！

Answer 1

contentを並べ替える必要があります.1つのことだけを繰り返すことができます。あなたはこのようなもので、これら二つの配列を結合する場合：

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 is too short"のアドバイスで。そして、私は複雑なテンプレート作成に興味深いアプローチを思いつきました。 *ほぼ動作します！

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

そして：

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

そして、私はこのようなテンプレートを持っている：

それでは、私はこのコンテンツを持っている（またはデータまたはビュー）私はテンプレートに入れたいとしましょう私が欲しい最終結果は次のとおりです：

<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）にしようとすると、1つのli項目または1つのhref = ""属性内の配列全体で終了します。だから悲しい...

彼はアプローチであり、テンプレートを複数回通過します。初めて、トップレベルのアイテムをパススルーして置き換え、次のパススルー用にテンプレートを調整します。 2回目は、リストの1つを調整し、コンテンツのレイヤー数がどのくらいあるかなど、3番目のパスのテンプレートを調整します。ここで新たな出発テンプレートは次のとおり第1トップレベルのものでフィルを通過し、{{に変更{{数字}}で

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

。私たちはMustache.render（template2、content.digits）を呼び出しますを通じて、次のパスで

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

;：今}}

$.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}} 
    <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に通し、.replaceを3回スタックすることができると思っています。あるいは、最低レベルのコンテンツから始めて、自分のやり方で作業してみることができます。私は知らないよ。

このすべての基本的なことは、この種のネスティングや複数のパススルーが口髭に入れられるための「論理的でない」方法があるかどうか疑問に思っています。