Questo violino ha entrambi each
e json diretto. http://jsfiddle.net/streethawk707/a9ssja22/ .
Di seguito sono riportati i due modi di iterare su array. Uno è con passaggio json diretto e un altro è la denominazione dell'array json durante il passaggio al contenitore del contenuto.
Eg1: L'esempio seguente chiama direttamente la chiave json (dati) all'interno della variabile small_data.
In html usa il codice seguente:
<div id="small-content-placeholder"></div>
Quanto segue può essere inserito nell'intestazione o nel corpo di 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>
Quello sotto è pronto per il documento:
var small_source = $("#small-template").html();
var small_template = Handlebars.compile(small_source);
Di seguito è il 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" }
]
};
Infine collega il json al titolare del contenuto:
$("#small-content-placeholder").html(small_template(small_data));
Eg2: Iterazione utilizzando ciascuno.
Considera il seguente json.
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" }
]
}
];
Durante il passaggio del json al titolare del contenuto, chiamalo in questo modo:
$("#big-content-placeholder").html(big_template({big_data:big_data}));
E il modello ha questo aspetto:
<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>