Làm cách nào để lặp qua mảng đối tượng trong Handlebars?

Đây có vẻ là một câu hỏi ngớ ngẩn nhưng tôi dường như không thể tìm thấy câu trả lời ở bất cứ đâu.

Tôi đang nhấn API Web này trả về một mảng đối tượng ở định dạng JSON:

Tài liệu về tay lái hiển thị ví dụ sau:

<ul class="people_list">
  {{#each people}}
  <li>{{this}}</li>
  {{/each}}
</ul>

Trong ngữ cảnh của:

{
  people: [
    "Yehuda Katz",
    "Alan Johnson",
    "Charles Jolley"
  ]
}

Trong trường hợp của tôi, tôi không có tên cho mảng, nó chỉ là đối tượng gốc của phản hồi. Tôi đã thử sử dụng {{#each}}mà không gặp may.

Lần đầu tiên sử dụng Handlebars ... Tôi còn thiếu gì?

CẬP NHẬT

Đây là một câu đố đơn giản để cho bạn biết những gì tôi đang hỏi: http://jsfiddle.net/KPCh4/2/

Các thanh điều khiển có yêu cầu biến ngữ cảnh là một đối tượng chứ không phải một mảng không?

Bạn có thể vượt qua thistừng khối. Xem tại đây: http://jsfiddle.net/yR7TZ/1/

{{#each this}}
    <div class="row"></div>
{{/each}}

Fiddle này có cả eachjson và trực tiếp. http://jsfiddle.net/streethawk707/a9ssja22/ .

Dưới đây là hai cách lặp qua mảng. Một là với việc truyền trực tiếp json và một là đặt tên cho mảng json trong khi chuyển cho người giữ nội dung.

Ví dụ 1: Ví dụ dưới đây đang gọi trực tiếp khóa json (dữ liệu) bên trong biến small_data.

Trong html, sử dụng mã dưới đây:

<div id="small-content-placeholder"></div>

Dưới đây có thể được đặt trong tiêu đề hoặc nội dung của html:

<script id="small-template" type="text/x-handlebars-template">
    <table>
        <thead>
            <th>Username</th>
            <th>email</th>
        </thead>
        <tbody>
            {{#data}}
                <tr>
                    <td>{{username}}
                    </td>
                    <td>{{email}}</td>
                </tr>
            {{/data}}
        </tbody>
    </table>
</script>

Cái dưới đây là tài liệu đã sẵn sàng:

var small_source   = $("#small-template").html();
var small_template = Handlebars.compile(small_source);

Dưới đây là json:

var small_data = {
            data: [
                {username: "alan1", firstName: "Alan", lastName: "Johnson", email: "alan1@test.com" },
                {username: "alan2", firstName: "Alan", lastName: "Johnson", email: "alan2@test.com" }
            ]
        };

Cuối cùng, đính kèm json vào trình giữ nội dung:

$("#small-content-placeholder").html(small_template(small_data));

Vd2: Lặp lại sử dụng từng.

Hãy xem xét json dưới đây.

var big_data = [
            {
                name: "users1",
                details: [
                    {username: "alan1", firstName: "Alan", lastName: "Johnson", email: "alan@test.com" },
                    {username: "allison1", firstName: "Allison", lastName: "House", email: "allison@test.com" },
                    {username: "ryan1", firstName: "Ryan", lastName: "Carson", email: "ryan@test.com" }
                  ]
            },
            {
                name: "users2",
                details: [
                    {username: "alan2", firstName: "Alan", lastName: "Johnson", email: "alan@test.com" },
                    {username: "allison2", firstName: "Allison", lastName: "House", email: "allison@test.com" },
                    {username: "ryan2", firstName: "Ryan", lastName: "Carson", email: "ryan@test.com" }
                  ]
            }
      ];

Trong khi chuyển json cho chủ sở hữu nội dung, chỉ cần đặt tên nó theo cách này:

$("#big-content-placeholder").html(big_template({big_data:big_data}));

Và mẫu trông giống như:

<script id="big-template" type="text/x-handlebars-template">
    <table>
        <thead>
            <th>Username</th>
            <th>email</th>
        </thead>
        <tbody>
            {{#each big_data}}
                <tr>
                    <td>{{name}}
                            <ul>
                                {{#details}}
                                    <li>{{username}}</li>
                                    <li>{{email}}</li>
                                {{/details}}
                            </ul>
                    </td>
                    <td>{{email}}</td>
                </tr>
            {{/each}}
        </tbody>
    </table>
</script>

Ý tôi là trong template()cuộc gọi ..

Bạn chỉ cần chuyển kết quả dưới dạng một đối tượng. Vì vậy, thay vì gọi

var html = template(data);

làm

var html = template({apidata: data});

Và sử dụng {{#each apidata}} trong mã mẫu của bạn

demo tại http://jsfiddle.net/KPCh4/4/
( đã xóa một số ifmã còn sót lại bị lỗi )

Handlebars có thể sử dụng một mảng làm bối cảnh. Bạn có thể sử dụng .làm dữ liệu gốc. Vì vậy, bạn có thể lặp qua dữ liệu mảng của mình với {{#each .}}.

var data = [
  {
    Category: "General",
    DocumentList: [
      {
        DocumentName: "Document Name 1 - General",
        DocumentLocation: "Document Location 1 - General"
      },
      {
        DocumentName: "Document Name 2 - General",
        DocumentLocation: "Document Location 2 - General"
      }
    ]
  },
  {
    Category: "Unit Documents",
    DocumentList: [
      {
        DocumentName: "Document Name 1 - Unit Documents",
        DocumentList: "Document Location 1 - Unit Documents"
      }
    ]
  },
  {
    Category: "Minutes"
  }
];

$(function() {
  var source = $("#document-template").html();
  var template = Handlebars.compile(source);
  var html = template(data);
  $('#DocumentResults').html(html);
});

.row {
  border: 1px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div id="DocumentResults">pos</div>
<script id="document-template" type="text/x-handlebars-template">
  <div>
  {{#each .}}
    <div class="row">
      <div class="col-md-12">
        <h2>{{Category}}</h2>
        {{#DocumentList}}
        <p>{{DocumentName}} at {{DocumentLocation}}</p>
        {{/DocumentList}}
      </div>
    </div>
  {{/each}}
  </div>
</script>

Sử dụng thisvà {{this}}. Xem mã bên dưới trong node.js:

var Handlebars= require("handlebars");
var randomList= ["James Bond", "Dr. No", "Octopussy", "Goldeneye"];
var source= "<ul>{{#each this}}<li>{{this}}</li>{{/each}}</ul>";
var template= Handlebars.compile(source);
console.log(template(randomList));

Đầu ra nhật ký bảng điều khiển:

<ul><li>James Bond</li><li>Dr. No</li><li>Octopussy</li><li>Goldeneye</li></ul>