Làm cách nào để sử dụng các trình vòng lặp lồng nhau với Mustache.js hoặc Handlebars.js?

Tôi muốn sử dụng handlebars.js hoặc mustache.js để lặp qua danh sách các gia đình và sau đó lặp lại thành viên của gia đình đó. Bên trong của cả hai vòng, tôi muốn hiển thị các thuộc tính của cả hai. Tuy nhiên, một khi tôi nhận được vào lần lặp thứ hai, không ai trong số các biến gia đình có thể nhìn thấy.Làm cách nào để sử dụng các trình vòng lặp lồng nhau với Mustache.js hoặc Handlebars.js?

{{#each families}} 
    {{#each members}} 
    <p>{{ (here I want a family name property) }}</p> 
    <p>{{ (here I want a member name property) }}</p> 
    {{/each}} 
{{/each}}

Điều này có khả thi không? Tôi rất cảm kích sự giúp đỡ nào!

Nguồn

2012-02-09 Eric the Red

có thể bạn cũng có thêm một mẫu của các dữ liệu đối tượng bạn đang ăn vào ria mép/tay lái? – gonchuki

Bạn có thể lồng các phần dễ dàng với danh sách đối tượng. Sử dụng một cấu trúc dữ liệu mà families là một danh sách đó có một đối tượng members rằng có một danh sách của bất kỳ đối tượng (hoặc danh sách thậm chí nhiều hơn) như:

{ 
    "families" : [ 
     { 
      "surname": "Jones", 
      "members": [ 
      {"given": "Jim"}, 
      {"given": "John"}, 
      {"given": "Jill"} 
      ] 
     }, 
     { 
      "surname": "Smith", 
      "members": [ 
      {"given": "Steve"}, 
      {"given": "Sally"} 
      ] 
     } 
     ] 
}

Bạn sẽ có thể để cư một mẫu như:

<ul> 
    {{#families}} 
    <li>{{surname}} 
     <ul> 
     {{#members}} 
     <li>{{given}}</li> 
     {{/members}} 
     </ul> 
    </li> 
    {{/families}} 
    </ul>

jsFiddle hiện xuống vì vậy đây là HTML làm việc đầy đủ với JS:

<!DOCTYPE html> 
<head> 

    <script src="http://cdnjs.cloudflare.com/ajax/libs/mustache.js/0.3.0/mustache.min.js"></script> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <script> 
    $(function() { 
     var tpl = $('#fam').html(), 
     data = { 
      "families" : [ 
      { 
       "surname": "Jones", 
       "members": [ 
       {"given": "Jim"}, 
       {"given": "John"}, 
       {"given": "Jill"} 
       ] 
      }, 
      { 
       "surname": "Smith", 
       "members": [ 
       {"given": "Steve"}, 
       {"given": "Sally"} 
       ] 
      } 
      ] 
     }, 
     html = Mustache.to_html(tpl, data); 

     $("#main").append(html); 

    }); 
    </script> 

</head> 

<div id="main"></div> 

<script type="template/text" id="fam"> 
    <ul> 
    {{#families}} 
    <li>{{surname}} 
     <ul> 
     {{#members}} 
     <li>{{given}}</li> 
     {{/members}} 
     </ul> 
    </li> 
    {{/families}} 
    </ul> 
</script>

Nguồn

2012-02-09 22:14:09 maxbeatty

Câu đố cho [** Tay lái **] (http://jsfiddle.net/KyleMit/nL32Q/1/) và [** Ria mép **] (http://jsfiddle.net/KyleMit/e3kMw/1/) – KyleMit

Điều gì sẽ xảy ra nếu mảng trên cũng có thuộc tính được gọi là "đã cho" mà bạn muốn tham chiếu? –

@DominicTobias Mustache chỉ cho phép bạn tham chiếu các biến từ phạm vi hiện tại. Bạn có thể có biến 'given' ở mỗi cấp nhưng không thể truy cập các biến cấp của cấp độ gốc. http://jsfiddle.net/9jpnpw7a/1/ (Handlebars có lẽ sẽ cho phép bạn làm điều này) – maxbeatty

Great câu trả lời @maxbeatty.

Tôi chỉ muốn thêm ví dụ khác nếu có ai có cùng vấn đề và không thể hiểu giải pháp trên.

Trước tiên tôi có một mảng chiều mà tôi muốn chia trên mỗi 4 yếu tố:

// this is the one dimensional data we have from let's say a mysql query 
var array = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', ...]; 

// think of it as [[], [], [], [], [], ...] 
// but instead we'll be adding a dummy object with a dummyKey 
// since we need a key to iterate on 
var jagged = []; 

var size = 4, // this is the size of each block 
    total = array.length/block; // total count of all blocks 
// slice the initial one dimensional array into blocks of 4 elements each 
for (var i=0; i < total; i++) { 
    jagged.push({dummyKey: array.slice(i*size, (i+1)*size)}); 
}

Bây giờ nếu chúng ta vượt qua jagged vào xem, chúng ta có thể lặp nó như thế:

<ul> 
{{#jagged}} 
    <li> 
     <ul> 
      {{#dummyKey}} 
      <li>{{.}}</li> 
      {{/dummyKey}} 
     </ul> 
    </li> 
{{/jagged}} 
</ul>

Nếu chúng tôi có mảng ban đầu chứa đầy các đối tượng:

var array = [{key1: 'a', 
       key2: 'b'}, 
      {key1: 'c', 
       key2: 'd'}, 
      {key1: 'e', 
       key2: 'f'}, 
       ... 
];

Sau đó, trong tem của chúng tôi tấm chúng tôi sẽ có:

<ul> 
{{#jagged}} 
    <li> 
     <ul> 
      {{#dummyKey}} 
      <li>{{key1}} - {{key2}}</li> 
      {{/dummyKey}} 
     </ul> 
    </li> 
{{/jagged}} 
</ul>

Nguồn

2012-07-08 18:01:26 simo

Xin lỗi tôi hơi muộn trong trò chơi ở đây. Câu trả lời được chấp nhận là tuyệt vời nhưng tôi muốn thêm một câu trả lời mà tôi nghĩ cũng hữu ích, đặc biệt nếu bạn đang lặp qua các mảng hàng/cột đơn giản.

Khi bạn đang làm việc với các đường dẫn tay lái lồng nhau, bạn có thể sử dụng ../ để tham khảo ngữ cảnh mẫu gốc (see here để biết thêm thông tin).

Vì vậy, ví dụ, bạn có thể làm:

{{#each families}} 
    {{#each members}} 
    <p>{{../surname}}</p> 
    <p>{{given}}</p> 
    {{/each}} 
{{/each}}

Điều này đặc biệt hữu ích đối với tôi bởi vì tôi đã làm cho một mạng lưới và tôi muốn cung cấp cho mỗi vuông một tên lớp tương ứng với hàng và cột vị trí của nó. Vì vậy, nếu rows và columns, chỉ cần trả mảng, tôi có thể làm điều này:

<tbody> 
    {{#each rows}}               
    <tr> 
     {{#each columns}} 
     <td class="{{this}}{{../this}}"></td> 
     {{/each}} 
    </tr> 
    {{/each}} 
</tbody>

Cập nhật

Giải pháp này là dành cho tay lái. Một bình luận dưới đây giải thích tại sao nó sẽ không hoạt động trong Mustache.

Nguồn

2013-02-11 04:39:43 Samo

Lưu ý rằng điều này chỉ hoạt động trên Handlebars, không phải trên Mustache. Mustache sẽ chỉ nhận biến "gần nhất" có cùng tên trong đường dẫn lồng nhau và kiến thức của tôi không có cách nào để truy cập biến có cùng tên được khai báo ở cấp ngoài. Sử dụng cú pháp '../' trong mẫu Mustache sẽ không ném lỗi, nhưng sẽ không nhận bất kỳ giá trị nào. – Pere

Cảm ơn bạn đã làm rõ. Trong thực tế, tôi không biết điều đó. – Samo

chính xác những gì tôi đang tìm kiếm! cám ơn vì đã chia sẻ –

Đối với một tập dữ liệu như dưới đây:

{ 
    rows: 
    ["1A", "1B"], 
    ["2A", "2B"], 
    ["3A", "3B"] 
}

sau sẽ làm việc trong mustachejs:

<tbody> 
    {{#rows}} 
    <tr> 
     {{#.}} 
     <td>{{.}}</td> 
     {{/.}} 
    </tr> 
    {{/rows}} 
</tbody>

Nguồn

2017-06-03 01:42:19

tôi đang tìm kiếm các vấn đề tương tự sử dụng bộ ria mép và câu trả lời được đưa ra cho tay lái, và những người thân cho ria mép cần thêm JS, tôi biết nó là cũ nhưng tôi sẽ thêm ví dụ làm việc của tôi chỉ trong trường hợp ai đó cần nó. Chúc mừng!

JSON:

"experience": [ 
    { 
      "company": "Company 1", 
      "position": "Graphic Designer", 
      "tasks": ["Task 1", "Task 2", "Task 3"] 
    }, 
    { 
      "company": "Company 2", 
      "position": "Graphic Designer", 
      "tasks": ["Task 1", "Task 2", "Task 3", "Task 4", "Task 5"] 
    } 
]

TEMPLATE:

{{#experience}} 
     <h2>{{company}}</h2> 
     <div class="position">{{position}}</div> 
     <div class="occupazione">Responsabilities</div> 
      <ul> 
      {{#tasks}} 
      <li>{{.}}</li> 
      {{/tasks}} 
      </ul> 
{{/experience}}

Nguồn

2017-10-22 07:50:11 ryangus

Làm cách nào để sử dụng các trình vòng lặp lồng nhau với Mustache.js hoặc Handlebars.js?

Trả lời

Các vấn đề liên quan