Comment parcourir un tableau d'objets dans Handlebars?


108

Cela peut sembler une question idiote mais je n'arrive pas à trouver la réponse nulle part.

Je frappe cette API Web qui renvoie un tableau d'objets au format JSON:

tableau d'objets

La documentation de Handlebars montre l'exemple suivant:

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

Dans le contexte de:

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

Dans mon cas, je n'ai pas de nom pour le tableau, c'est juste l'objet racine de la réponse. J'ai essayé d'utiliser {{#each}}sans succès .

Première utilisation du guidon ... Que me manque-t-il?

METTRE À JOUR

Voici un violon simplifié pour vous montrer ce que je demande: http://jsfiddle.net/KPCh4/2/

Les guidons nécessitent-ils que la variable de contexte soit un objet et non un tableau?


Comment transmettez-vous les résultats de l'API au modèle ( actuellement )?
Gabriele Petrioli

@ GabyakaG.Petrioli l'API n'est pas la mienne, je n'ai aucun contrôle dessus. J'utilise juste jQuery ajax et j'obtiens l'objet de réponse, qui est un tableau d'objets.
emzero

Réponses:


158

Vous pouvez passer thisà chaque bloc. Voir ici: http://jsfiddle.net/yR7TZ/1/

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

Alors est-il possible d'appeler le numéro d'index de la boucle externe {{#each people}}à l'intérieur de la boucle interne {{#each this}}? J'aime{{people@index}}
RegarBoy

18

Ce violon a à la fois eachet json direct. http://jsfiddle.net/streethawk707/a9ssja22/ .

Voici les deux façons d'itérer sur un tableau. L'une consiste à passer directement par json et l'autre à nommer le tableau json tout en le passant au détenteur de contenu.

Eg1: L'exemple ci-dessous appelle directement la clé json (data) à l'intérieur de la variable small_data.

En html, utilisez le code ci-dessous:

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

Le ci-dessous peut être placé dans l'en-tête ou le corps du 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>

Celui ci-dessous est prêt pour le document:

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

Le ci-dessous est le 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" }
            ]
        };

Enfin, attachez le json au support de contenu:

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

Exemple 2: itération utilisant chacun.

Considérez le json ci-dessous.

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" }
                  ]
            }
      ];

En passant le json au détenteur de contenu, nommez-le simplement de cette manière:

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

Et le modèle ressemble à:

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

Comment compiler cela en utilisant des guidons gulp?
webkitfanz

10

Je voulais dire dans l' template()appel ...

Il vous suffit de transmettre les résultats en tant qu'objet. Alors au lieu d'appeler

var html = template(data);

faire

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

et utilisez {{#each apidata}}dans votre code de modèle

démo sur http://jsfiddle.net/KPCh4/4/
( suppression du ifcode restant qui s'est écrasé )


3
C'est bien, mais la réponse AZ est meilleure. Utiliser {{#each this}}est la bonne forme.
emzero

en effet, cette manière a beaucoup plus de sens, merci!
woohoo

8

Les guidons peuvent utiliser un tableau comme contexte. Vous pouvez utiliser .comme racine des données. Ainsi, vous pouvez parcourir vos données de tableau avec {{#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>


1

Utilisation thiset {{this}}. Voir le code ci-dessous dans 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));

Sortie du journal de la console:

<ul><li>James Bond</li><li>Dr. No</li><li>Octopussy</li><li>Goldeneye</li></ul>
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.