Share
Hace un tiempo, le mostré cómo usar el complemento de la plantilla jQuery en una sugerencia rápida; En este rápido consejo, te mostraré cómo usar otra biblioteca de plantillas, Moustache, que es igual de fácil de usar..
Puedes obtener Mustache.js desde la página del proyecto de GitHub; Si lo va a utilizar en un proyecto, puede descargarlo o git clon eso; Acabo de consultar el archivo sin procesar en GitHub para esta rápida sugerencia:
Ahora puedes usarlo para renderizar datos.!
Lo más probable es que obtenga sus datos del servidor en forma de JSON cuando use Moustache en producción. Sin embargo, es igual de fácil codificar un objeto literal y usarlo, que es lo que haremos aquí.
Accentsconagua
var data = name: "Some Tuts + Sites", sitios: ["Nettuts +", "Psdtuts +", "Mobiletuts +"], url: function () return function (text, render) text = render (text); var url = text.trim (). toLowerCase (). split ('tuts +') [0] + '.tutsplus.com'; devuelve '' + texto + ''; ; Ahora estamos listos para definir la plantilla..
Su plantilla es simplemente una cadena; puede usar una cadena JavaScript antigua o regular, o puede colocar la plantilla en una etiqueta de script y obtenerla a través de algo como jQuery's html () método (o, por supuesto,, internalHTML). Esta es probablemente una mejor opción si está utilizando una plantilla complicada, ya que puede usar saltos de línea. Solo recuerde darle al script un tipo de algo diferente a "texto / javascript"; De lo contrario, los navegadores pueden intentar interpretarlo, y eso causará errores..
Su plantilla será principalmente HTML; cuando desee utilizar un valor de sus datos, haga referencia al nombre clave del valor en los datos. Usar el nombre valor en los datos anteriores, usted lo referenciaría así:
nombre
Los bloques son una pieza importante del bigote: puedes usarlos para ingresar dentro de matrices y objetos, así como para lambdas (funciones). Es bastante simple hacer bloques: solo use una etiqueta de apertura y cierre: la de apertura comienza con una libra (#) y la de cierre con una barra (/).
Al iterar sobre matrices, el operador implícito "." Obtendrá el valor. Si sitios Era un objeto, usarías sus claves dentro del bloque..
Usar funciones es un poco más complicado. Para la parte de datos, Mustache.js requiere una función que vuelve La función a utilizar. Esa función pasa el texto que se va a representar (todo el texto dentro de las etiquetas de función de bigote) y una función que procesará las etiquetas de plantilla dentro del texto. Entonces, lo que devuelva esa función se pondrá dentro de las etiquetas. Usted puede ver esto en el trabajo en el urls funciona en los datos anteriores.
Es realmente sencillo renderizar el HTML:
html = Mustache.to_html (plantilla, datos);
Entonces, puedes pegar ese HTML donde quieras..
datos var, plantilla, html; data = name: "Some Tuts + Sites", sitios: ["Nettuts +", "Psdtuts +", "Mobiletuts +"], url: function () return function (text, render) text = render (text); var url = text.trim (). toLowerCase (). split ('tuts +') [0] + '.tutsplus.com'; devuelve '' + texto + ''; ; template = " nombre
Para obtener más información sobre el bigote, visite el sitio web. Diviértete con eso!
