Moustache (hoặc tay lái) iterating qua hai danh sách

Question

Tôi có hai mảng:

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

và một mẫu:

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

Tôi muốn kết quả cuối cùng là:

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

Tôi đã thử các bộ ria khối như {{#girls}} {{.}} {{/girls}} và {{#digits}} {{.}} {{/digits}} nhưng không có vấn đề gì cách tôi làm tổ chúng tôi dường như để có được repe ats thay vì xen kẽ.

Bất kỳ ý tưởng nào?

PS: Rõ ràng trong tương lai, chúng tôi sẽ hỏi địa chỉ IP, chứ không phải số điện thoại.

PPS: Không ai trong số đó được dự định là IP thực, vui lòng không liên hệ với những cô gái đó!

Answer 1

Bạn cần sắp xếp lại content để bạn có thể lặp qua chỉ một điều. Nếu bạn kết hợp hai mảng với một cái gì đó như thế này:

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

Sau đó, một mẫu như thế này:

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

nên làm việc.

Answer 2

Với lời khuyên "mu quá ngắn". Và một vài ý tưởng điên rồ tôi đã đưa ra một cách tiếp cận thú vị để tạo khuôn mẫu phức tạp. * Nó gần như hoạt động!

Vì vậy, chúng ta hãy nói rằng tôi có nội dung này (hoặc dữ liệu hoặc xem) mà tôi muốn đưa vào một khuôn mẫu:

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

Và tôi có một mẫu như thế này:

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

Và kết quả cuối cùng tôi muốn là:

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

Vấn đề chúng tôi gặp phải là chúng tôi có mảng (hoặc danh sách) được lồng trong nội dung gốc và nếu chúng tôi đã cố gắng để Mustache.render (html, nội dung), chúng tôi sẽ chỉ kết thúc bằng một mục li hoặc toàn bộ mảng trong thuộc tính one href = "". Rất buồn ...

Vì vậy, anh ấy là cách tiếp cận, đi qua mẫu nhiều lần. Lần đầu tiên, chuyển qua và thay thế các mục cấp cao nhất và điều chỉnh mẫu cho lần truyền tiếp theo. Lần thứ hai, điều chỉnh một trong các danh sách và điều chỉnh mẫu cho lần truyền thứ ba, v.v. cho bao nhiêu lớp nội dung bạn có. Đây là mẫu bắt đầu mới:

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

Lần đầu tiên thông qua điền vào công cụ cấp cao nhất và thay đổi {{digit}} thành {{.}}

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

Bây giờ bạn có thế này:

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

Trên đường chuyền tiếp theo thông qua chúng tôi sẽ chỉ cần gọi Mustache.render (template2, content.digits); và điều đó sẽ cung cấp cho chúng tôi:

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

Và đó là nơi logic của tôi chết, haha. Bất kỳ sự giúp đỡ nào nghĩ đến điều này sẽ là đá! Tôi nghĩ rằng tôi có thể đưa ra {{hair}} phần tử khối và chỉ thực hiện chuyển $ .each qua content.girls và stack .replace ba lần. Hoặc tôi có thể cố gắng bắt đầu với mức độ nội dung thấp nhất và làm việc theo cách của tôi. Tôi không biết.

Tất cả điều này về cơ bản khiến tôi tự hỏi liệu có một số cách "logic-ít" cho loại tổ hoặc nhiều thông qua để được đưa vào ria mép không handlebars làm điều đó?