Uso de plantillas parciales precompiladas de Handlebars

Bigote daliniano

Handlebars es una gran pieza de software que nos permite mantener la interfaz de nuestra aplicación web separada por la lógica subyacente.. De hecho, Handlebars es un motor de plantillas sin lógica que compila nuestras plantillas sobre la marcha y sirve la página web resultante con nuestros datos.. Y es terriblemente fácil aprenderlo e integrarlo en un proyecto existente! Si no conoces el manillar o si quieres conocerlo mejor, por favor refiérase a la página de documentación oficial.

Compilar o precompilar, Esta es la pregunta…

Realmente, no es una pregunta tan difícil de responder: precompilar seguro! La precompilación de sus plantillas tiene 2 ventajas significativas para nosotros:

Podemos servir nuestras páginas web más rápido porque ya se ha realizado un paso del proceso de creación de plantillas y las plantillas están listas para usarse en el sitio web.
podemos usar handlebars.runtime.js en lugar de handlebars.js: una versión reducida de manillares con una huella más pequeña, tan rápido de cargar

Por lo tanto, podemos sin duda preferir precompilar nuestras plantillas, No es? Bueno, simplemente coloque todas sus plantillas en una carpeta que podamos llamar (Sé que no es original) plantillas. Nuestro árbol de directorios será algo como esto:

_{raíz de la aplicación}
_{– .css}
_{– .js}
_{– plantillas}
_{– plantilla1.hbs}
_{– plantilla1.hbs}
_{– plantilla1.hbs}
_{– índice.html}

Ahora abre un símbolo del sistema (o una ventana de terminal) y navega hasta el raíz de la aplicación luego escribe:

plantillas de manillar /> js / templates.js

Este comando compilará todos los archivos que encontrará dentro del directorio plantillas y generará el resultado en el archivo especificado (en este ejemplo, en el archivo plantillas.js mantener en el .js directorio.

Ahora solo tiene que agregar la siguiente línea dentro del cabeza etiquetas de sus páginas html para mostrar sus plantillas:

<de script type ="text / javascript" src ="js / handlebars.runtime.min.js"></guión>
<de script type ="text / javascript" src ="js / templates.js"></guión>

Fantástico!

Pero, Si usas parciales, esto no es suficiente. Déjame recordar aquí qué son los parciales en Handlebars..

Plantillas parciales

Una característica maravillosa de Handlebars es que puede usar una plantilla en otra plantilla: este tipo de «sub-plantilla» se llama parcial. Pero déjame explicarte por qué esta función puede ser útil..

Para acortar una historia larga, Estaba desarrollando una pequeña aplicación móvil híbrida para administrar a mis clientes y quería tener una página para agregar un nuevo cliente y otra página para editar un cliente existente.. Esta página de edición tenía que:

mostrar datos para el cliente seleccionado en una lista formateada
permitir ocultar la lista y mostrar un formulario para editar algunos datos cuando se hace clic en un botón

Así que había creado una plantilla para Agregar página con mi formulario y otra plantilla para el Editar página con la lista de datos del cliente. Pero en esta segunda página quería tener el formulario también y quería usar el mismo templñate que ya había escrito., evitando código duplicado. El manillar permite conseguirlo mediante parciales.. Veamos un ejemplo. Imagina que esta es la plantilla para la página de edición.:

edit_page.hbs

<h2>Cliente {{Nombre del cliente}}</h2>
<la>
    <en>{{Dirección}}</en>
    <en>{{código postal}}</en>
    <en>{{ciudad}}</en>
    <en>{{estado}}</en>
    <en>{{país}}</en>
</la>
<id del botón ="edit_customer">Editar</botón>

Y suponga que tiene su formulario en la siguiente plantilla:

customer_form.hbs

<formulario>
    <etiqueta para ="Nombre del cliente">Nombre del cliente</etiqueta>
    <tipo de entrada ="texto" nombre ="Nombre del cliente" id ="Nombre del cliente" valor ="{{Nombre del cliente}}" />
    <etiqueta para ="Dirección">Dirección</etiqueta>
    <tipo de entrada ="texto" nombre ="Dirección" id ="Dirección" valor ="{{Dirección}}" />
    <etiqueta para ="código postal">Código postal</etiqueta>
    <tipo de entrada ="texto" nombre ="código postal" id ="código postal" valor ="{{código postal}}" />
    <etiqueta para ="estado">Estado</etiqueta>
    <tipo de entrada ="texto" nombre ="estado" id ="estado" valor ="{{estado}}" />
    <etiqueta para ="país">País</etiqueta>
    <tipo de entrada ="texto" nombre ="país" id ="país" valor ="{{país}}" />
</formulario>

Bien, con manillares, podemos insertar en esta plantilla otra plantilla simplemente haciendo esto:

<h2>Cliente {{Nombre del cliente}}</h2>
<la>
    <en>{{Dirección}}</en>
    <en>{{código postal}}</en>
    <en>{{ciudad}}</en>
    <en>{{estado}}</en>
    <en>{{país}}</en>
</la>
<id del botón ="edit_customer">Editar</botón>
<div class ="edit_form">
    {{> formulario_cliente }}
</Div>

El problema

sin embargo, como dije arriba, esto no es suficiente. Con este código puedo con seguridad escribir algo como esto en mi javascript principal:

var html = Handlebars.templates.customer_form();
$('#add_new_customer').adjuntar(.html);

y voy a conseguir mi Add_customer página con el formulario: ya que no pasé ningún dato, el formulario estará vacío, como se esperaba ya que quiero agregar un nuevo cliente. Pero si trato de cargar mi edit_customer página faltará el formulario.

La solución

Para que se muestre, tengo que asignar objetos parciales al objeto templates antes y luego funcionará.

Así que vaya a su script principal de JavaScript y agregue esto inmediatamente después de la función principal de jQuery (o simplemente asegúrese de poner su código en la parte inferior de su página html como enseñan las mejores prácticas:

$(documento).Listo(función(){
    Handlebars.partials = Handlebars.templates;
    
    //el resto del código
});

Ahora puede cargar los datos de sus clientes envolviéndolos en una variable como información de los clientes y luego llamarte edit_customer página usando sus teplates y parciales precompilados:

var html = Handlebars.templates.clients(datos);
$('# target-div).adjuntar(.html);

Solo para un ejemplo más completo, mire el siguiente código, whcih obtiene datos de una base de datos alojada en un servidor a través de una llamada Ajax y luego usa la plantilla de Handlebars para mostrarlos en un div con id lista de clientes:

$.Ajax(función(){
    URL: 'get_customers.php',
    escribe: 'correo',
    éxito: función(clientes){
        por (var i = 0; yo < longitud de los clientes; yo ++){
            var data = clientes[yo];
            var html = Handlebars.templates.clients(datos);
            $('#lista de clientes).adjuntar(.html);
       }
    },
    error: función(jqXHR, textStatus, errorLanzado) {
        consola.log(textStatus, errorLanzado);
    }
});

Para resolver mi problema con mi pequeña aplicación busqué mucho en Google y encontré varios recursos útiles. Los más útiles han sido:

http://berzniz.com/post/24743062344/handling-handlebarsjs-like-a-pro

https://www.raymondcamden.com/2015/03/14/quick-handlebars-tip-concerning-precompilation

Y decisiva ha sido la solución de Nathan a este hilo:

https://stackoverflow.com/questions/12014547/how-do-i-precompile-partials-for-handlebars-js/30589866#12148609

Solo quería juntarlo todo para evitar que otros desarrolladores tengan que buscar en Internet para encontrar el truco 🙂 : espero que esto ayude.