Cela peut sembler une question idiote mais je n'arrive pas à trouver la réponse nulle part.
Je frappe cette Web Api qui renvoie un tableau d'objets au format JSON:
La documentation du guidon 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 simplement l'objet racine de la réponse. J'ai essayé d'utiliser {{#each}}
sans succès.
Première utilisation du guidon ... qu'est-ce qui me manque?
UPDATE
Voici un violon simplifié pour montrer ce que je demande: http://jsfiddle.net/KPCh4/2/
Le guidon nécessite-t-il que la variable de contexte soit un objet et non un tableau?
Vous pouvez passer this
à chaque bloc. Voir ici: http://jsfiddle.net/yR7TZ/1/
{{#each this}}
<div class="row"></div>
{{/each}}
Ce violon a à la fois each
et direct json. http://jsfiddle.net/streethawk707/a9ssja22/ .
Vous trouverez ci-dessous les deux manières de parcourir le tableau. L'un est avec json direct passant et un autre nomme le tableau json en passant au détenteur du contenu.
Eg1: l'exemple ci-dessous appelle directement json key (data) dans 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 de 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 sur le document prêt:
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: "[email protected]" },
{username: "alan2", firstName: "Alan", lastName: "Johnson", email: "[email protected]" }
]
};
Enfin attachez le json au détenteur du contenu:
$("#small-content-placeholder").html(small_template(small_data));
Eg2: Itération utilisant chacun.
Considérez le json ci-dessous.
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]" }
]
}
];
En passant le json au détenteur du contenu, nommez-le simplement comme suit:
$("#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>
Je voulais dire dans l'appel template()
..
Il vous suffit de transmettre les résultats sous forme d'objet. Donc 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 à http://jsfiddle.net/KPCh4/4/
( a supprimé un reste de code if
qui s'est écrasé )
Les guidons peuvent utiliser un tableau comme contexte. Vous pouvez utiliser .
comme racine des données. Vous pouvez donc 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>
Utilisation de this
et {{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>