Bagaimana cara mengulang array objek di Handlebars?

Ini mungkin pertanyaan yang konyol, tetapi saya tidak dapat menemukan jawabannya di mana pun.

Saya menggunakan API Web ini yang mengembalikan larik objek dalam format JSON:

Dokumen setang menunjukkan contoh berikut:

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

Dalam konteks:

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

Dalam kasus saya, saya tidak memiliki nama untuk array, itu hanya objek root dari respons. Saya sudah mencoba menggunakan {{#each}}tanpa hasil.

Pertama kali menggunakan Handlebars ... Apa yang saya lewatkan?

MEMPERBARUI

Berikut biola yang disederhanakan untuk menunjukkan kepada Anda apa yang saya tanyakan: http://jsfiddle.net/KPCh4/2/

Apakah setang memerlukan variabel konteks menjadi objek dan bukan array?

Anda bisa lolos thiske setiap blok. Lihat di sini: http://jsfiddle.net/yR7TZ/1/

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

Biola ini memiliki eachjson dan langsung. http://jsfiddle.net/streethawk707/a9ssja22/ .

Di bawah ini adalah dua cara untuk melakukan iterasi pada array. Salah satunya adalah dengan passing json langsung dan yang lainnya menamai array json sambil meneruskan ke pemegang konten.

Eg1: Contoh di bawah ini secara langsung memanggil kunci json (data) di dalam variabel small_data.

Dalam html gunakan kode di bawah ini:

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

Di bawah ini dapat ditempatkan di header atau body 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>

Yang di bawah ini ada di dokumen siap:

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

Di bawah ini adalah json tersebut:

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

Terakhir lampirkan json ke pemegang konten:

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

Eg2: Iterasi menggunakan masing-masing.

Pertimbangkan json di bawah ini.

var big_data = [
            {
                name: "users1",
                details: [
                    {username: "alan1", firstName: "Alan", lastName: "Johnson", email: "[email protected]" },
                    {username: "allison1", firstName: "Allison", lastName: "House", email: "[email protected]" },
                    {username: "ryan1", firstName: "Ryan", lastName: "Carson", email: "[email protected]" }
                  ]
            },
            {
                name: "users2",
                details: [
                    {username: "alan2", firstName: "Alan", lastName: "Johnson", email: "[email protected]" },
                    {username: "allison2", firstName: "Allison", lastName: "House", email: "[email protected]" },
                    {username: "ryan2", firstName: "Ryan", lastName: "Carson", email: "[email protected]" }
                  ]
            }
      ];

Saat meneruskan json ke pemegang konten, cukup beri nama dengan cara ini:

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

Dan templatenya terlihat seperti:

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

Maksudku dalam template()panggilan itu ..

Anda hanya perlu meneruskan hasilnya sebagai objek. Jadi, alih-alih menelepon

var html = template(data);

melakukan

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

dan gunakan {{#each apidata}}dalam kode template Anda

demo di http://jsfiddle.net/KPCh4/4/
( menghapus beberapa ifkode sisa yang rusak )

Setang dapat menggunakan larik sebagai konteksnya. Anda dapat menggunakan .sebagai root data. Jadi, Anda dapat melakukan loop melalui data array Anda dengan {{#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>

Menggunakan thisdan {{this}}. Lihat kode di bawah ini di 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));

Keluaran log konsol:

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