miércoles, 17 de julio de 2013

MustacheJS


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",
    • puntos15,
    },
  • {
    • id"118101928727597051061",
    • nickname"El Chamo",
    • foto"http://colldev.com/fotos/94556056565.jpg",
    • apellido"Mestanza",
    • nombre"Enmanuel",
    • puntos22,
    },

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