Uso de la biblioteca de plantillas de Moustache

Hace un tiempo, te mostré cómo usar el complemento de plantilla jQuery en un consejo rápido; En este consejo rápido, te mostraré cómo usar otra biblioteca de plantillas, Moustache , que es igual de fácil de usar.

Transmisión de pantalla completa

Paso 1: Descarga Moustache

Puedes obtener Moustache.js desde su página de proyecto de GitHub; si lo vas a usar en un proyecto, puedes descargarlo o clonarlo; Acabo de hacer referencia al archivo sin formato en GitHub para este consejo rápido:

1

 <script src="http://github.com/janl/mustache.js/raw/master/mustache.js"></script>

¡Ahora puedes usarlo para renderizar datos!

Paso 2: obtén tus datos

Lo más probable es que obtengas tus datos del servidor en forma de JSON cuando utilices Moustache en producción. Sin embargo, es tan fácil codificar un objeto literal y usarlo, que es lo que haremos aquí.

1

var data = { 

2

    name : "Some Tuts+ Sites", 

3

    sites: ["Nettuts+", "Psdtuts+", "Mobiletuts+"], 

4

    url : function () { 

5

        return function (text, render) { 

6

            text = render(text); 

7

            var url = text.trim().toLowerCase().split('tuts+')[0] + '.tutsplus.com'; 

8

            return &#39;<a href="&#39; + url + &#39;">&#39; + text + &#39;</a>&#39;; 

9

        } 

10

    } 

11

};

Ahora estamos listos para definir la plantilla.

Paso 3: crea tu plantilla

Tu plantilla es simplemente una cadena; puedes usar una cadena JavaScript antigua normal o puedes poner la plantilla en una etiqueta de script y obtenerla a través de algo como el método html () de jQuery (o, por supuesto, innerHTML). Esta es probablemente una mejor opción si estás usando una plantilla complicada, porque puedes usar saltos de línea.  Solo recuerda darle al script un tipo de algo que no sea "texto / javascript"; de lo contrario, los navegadores pueden intentar interpretarlo y eso provocará errores.

Tu plantilla será principalmente HTML; cuando desees utilizar un valor de tus datos, haz referencia al nombre de clave del valor en los datos. Para usar el valor del nombre en los datos anteriores, debes hacer referencia a él de esta manera:

1

<h1> {{name}} </h1>

Los bloques son una pieza importante de Moustache: puedes usarlos para ingresar a matrices y objetos, así como para lambdas (funciones). Es bastante simple hacer bloques: solo usa una etiqueta de apertura y cierra: la de apertura comienza con una libra (#) y la de cierre con una barra (/).

1

<ul> 

2

    {{#sites}} 

3

4

        <li> {{.}} </li> 

5

6

    {{/sites}} 

7

</ul>

Al iterar sobre matrices, el operador implícito "." obtendrá el valor. Si los sitios fueran un objeto, usarías sus claves dentro del bloque.

Usar funciones es un poco más complicado. Para la parte de datos, Moustache.js requiere una función que devuelva la función que se utilizará.  Esa función obtiene el texto que se va a representar (todo el texto dentro de las etiquetas de función del bigote) y una función que representará las etiquetas de la plantilla dentro del texto.  Entonces, lo que sea que devuelva esa función se colocará dentro de las etiquetas. Puedes ver esto en funcionamiento en la función de URL en los datos anteriores.

Paso 4: renderiza el HTML

Es realmente sencillo renderizar el HTML:

1

html = Mustache.to_html(template, data);

Luego, puedes pegar ese HTML donde quieras.

La fuente completa

1

2

var data, template, html; 

3

4

data = { 

5

    name : "Some Tuts+ Sites", 

6

    sites: ["Nettuts+", "Psdtuts+", "Mobiletuts+"], 

7

    url : function () { 

8

        return function (text, render) { 

9

            text = render(text); 

10

            var url = text.trim().toLowerCase().split('tuts+')[0] + '.tutsplus.com'; 

11

            return '<a href="' + url + '">' + text + '</a>'; 

12

        } 

13

    } 

14

}; 

15

16

template = " 

17

<h1> {{name}} </h1>  

18

<ul> {{#sites}} 

19

<li> {{#url}} {{.}} {{/url}} </li>  

20

21

 {{/sites}}  </ul>  

22

23

"; 

24

25

html = Mustache.to_html(template, data); 

26

27

document.write(html)

Conclusión

Para obtener más información sobre Moustache, visita el sitio web. ¡Diviértate con eso!