1.- Clonar repositorio
git clone https://github.com/janl/mustache.js.git cd mustache.js
2.- Instalar Rake (debes tener instalado Ruby)
sudo apt-get install rake
3.- Compilar el port de mustachejs para JQuery
rake jquery
4.- Copiar el archivo jquey.mustache.js generado a la carpeta del proyecto
cp jquery.mustache.js /carpeta/del/proyecto/js/
5.- Referenciar al final de body al archivo jquery.mustache.js
<body> <!-- Todo el código hasta aquí --> <script src="bootstrap/jquery.mustache.js"></script> </body>
6.- Supongamos que el JSON a recibir tiene la siguiente estructura:
usuarios: [
- {
- id: "104252322540371913346",
- nickname: "Joebuntu",
- foto: "http://colldev.com/fotos/05464654654.jpg",
- apellido: "Robles",
- nombre: "Joe",
- puntos: 17,
- {
- id: "109036977773341074539",
- nickname: "Master Ojitos",
- foto: "http://colldev.com/fotos/46546546046.jpg",
- apellido: "García",
- nombre: "Ricardo",
- puntos: 15,
- {
- id: "118101928727597051061",
- nickname: "El Chamo",
- foto: "http://colldev.com/fotos/94556056565.jpg",
- apellido: "Mestanza",
- nombre: "Enmanuel",
- puntos: 22,
7.- El template debería tener el siguiente contenido:
<table class="table-striped">
<thead>
<tr>
<th class="nosort">Foto</th>
<th>Apellido</th>
<th>Nombre</th>
<th>Puntos</th>
</tr>
</thead>
<tbody>
{{ #usuarios }}
<tr id="result_{{ id }}">
<td>
<a href="https://plus.google.com/{{ id }}" title="{{ nickname }}"><img src="{{ foto }}" /></a>
</td>
<td>{{ apellido }}</td>
<td>{{ nombre }}</td>
<td>{{ puntos }}</td>
</tr>
{{ /usuarios }}
</tbody>
</table>
6.- El modo de usar el template luego de recibir el JSON es:
$.getJSON("/controlador/que/devuelve/json")//recibe la respuesta en json
.done(function(data){//al término
$.get("/ruta/al/template.html", function(template){//lee el template html
$("div#search_results").html('');//vacía el resultado
if (data.videos == '') {//si no hay resultados
var app = '<div class="text-center"><h4>No hay resultados para la búsqueda:</h4></div>';
} else {//si hay resultados
var app = $.mustache(template, data);
}
$("div#search_results").append(app);//agrega resultados iterados
});
});
7.- El resultado será:| Foto | Apellido | Nombres | Puntos |
|---|---|---|---|
 | Robles | Joe | 17 |
 | García | Ricardo | 15 |
 | Mestanza | Enmanuel | 22 |
No hay comentarios.:
Publicar un comentario
Puedes comentar como te gustaría que comenten de ti.