Ce violon a à la fois each
et 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>