instalar
Hbs instalar de dos maneras:
1. Uso NPM instalar HBs paquete de proyectos existentes
NPM instalar HBS --save
Este método es sólo de las HBS biblioteca paquete de NPM se instala en el proyecto, para utilizar realmente en el proyecto también necesita ser configurado, a continuación, vamos a discutir
2. Uso exprss-generador para crear un proyecto utilizando HBS
Esta situación es, usted no tiene proyectos, pero el uso de Express-generador de ese paquete NPM para crear una plantilla de proyecto expresas HBS elección del motor.
NPM instalar Express-generador -g
expreso --hbs nombre del proyecto
Esto creará una plantillas de proyecto Express utilizando HBS, en app.js configuración se ha hecho, entonces no necesitamos configuración adicional se puede escribir directamente HBS archivos de plantilla.
configuración
Aquí que la configuración se refiere a expresar configurar el proyecto para que pueda apoyar HBS, para su instalación en el primer caso, dijo.
App.js encuentra en app.set ( 'vista motor', 'xxx'); código de lectura de la siguiente manera:
app.set ( 'vista motor', 'HBS');
Justo lo que uno puede hacer uso de las HBS proyecto expresa como el motor de la plantilla por defecto.
Modificar la extensión por defecto
Si nos fijamos HBS esta extensión infeliz, y puede ser modificado. método de modificación es simple, app.set ( 'vista motor', 'fresco'), lo que será capaz de modificar la extensión predeterminada en el fresco. Pero esta vez no es suficiente, expresa no saben lo que también se necesita frío para establecer relaciones entre fresco con motor de plantillas HBS.
app.engine ( 'enfriar', require ( 'HBS') .__ Express);
Vale, así que pusimos el sufijo por defecto de HBS fresco cambiado.
estrategia de motor de plantillas expresa seleccionado
1. Si no hay una extensión de nombre de archivo predeterminado, tomar la configuración del sistema, y adquiere la plantilla correspondiente en base a la extensión del motor.
2. Si el sufijo, mediante la extensión directa para ir a buscar el motor de plantilla apropiado.
expresan de manera muy capacidad para hacer una variedad de motores de plantilla coexisten, no se necesita ninguna configuración adicional.
Proporcionar un ayudante plantilla personalizada
la lógica de negocio HBS motor de plantillas independientes (plantilla lógica-menos). No se recomienda escribir código demasiado complejo en el archivo de plantilla. Sin embargo, para funciones simples aparecer varias veces en diferentes archivo de plantilla, podemos utilizar el código proporcionado registerHelper HBS registrados como ayudante, entonces se pueden llamar directamente en el archivo de plantilla, mejorar la reutilización de código. método de ayuda de registro es el siguiente:
hbs.registerHelper ( 'sayHello', function () {
......
});
El código anterior registra un nombre para el método sayHello, al escribir archivos de plantilla se pueden llamar directamente. El método se puede definir parámetros. La llamada al método hablaremos más adelante.
Optimizar el uso de la plantilla parcial
A menudo se encuentran, la cabeza y la cola del código es el mismo desde hace más de una página, a una parte diferente de la mitad del contenido. Por lo que podemos utilizar registerPartial define parcial. referencia directa al archivo de plantilla parcial en el archivo de plantilla que desea utilizar en ella. Como ayudante es el papel de la reutilización de código.
hbs.registerPartial (nombre, parcial);
Por ejemplo:
hbs.registerPartial ( 'cabecera', '<head> <title> {{title}} </ title> </ head>');
Llaman a los métodos siguientes van a hablar.
gramática
Continúa hablar de gramática escrita en el archivo de plantilla. Antes de la primera charla sobre el concepto de contexto. expresar manera de utilizar el motor de plantillas es res.render ( 'plantilla de nombre de archivo', {}), y el segundo parámetro se pasa a los datos de plantilla, llamado contexto (contexto).
nota
{{! - comentario de texto -}}
{{!}} Texto de la anotación
Ambos son los comentarios, la diferencia es que el primero se mantendrá, pero este último comentario en el archivo de plantilla, después compilados en html no.
simple expresión
{{Nombre}} {{{或 nombre}}}
Retire el nombre de atributo se muestra a partir del contexto. El primero sería el contenido de escapar, mientras que el segundo no. Nombre como <p> John </ p>, la primera es la salida & lt; p & gt; John & lt; / p & gt; último es de salida.
bloque de expresión
{{#if condition}}
......
{{/Si}}
etiqueta # Start es una palabra clave, se acaba / palabra clave
ayudante de llamada
}} {{SayHello
sayHello se define por nuestro ayudante, si los parámetros requeridos sayHello sólo tienen que añadir los parámetros pasados en el momento de la llamada, tales como:
{{sayHello param1 param2}}
utilice parcial
{{>}} Miparcial
Incorporado en el bloque de control de flujo
Si
{{}} Condición #Si
......
{{/Si}}
{{}} Condición #Si
....
{{más}}
...
{{/Si}}
con
Su función es reducir la profundidad de una referencia de objeto, el supuesto aquí es contexto
{
Nombre: "PI deriva de fantasía juvenil"
autor:{
Nombre: "extranjeros"
patria:{
Nombre: "extranjera"
posición: "Atlántico"
}
}
}
Cuando alguna plantilla para este país mostramos un bloque de datos, de la siguiente manera:
País: {{ author.motherland.name }}
Posición: {{}} author.motherland.position
¿Hay un montón de prefijo duplicado, esta vez se puede utilizar con el
{{}} #With author.motherland
Patria: nombre
Localización: Posición
{{/con}}
Si el nivel más profundo, más propiedad, entonces los beneficios es bastante clara, los ejemplos anteriores son sólo dos propiedades.
cada
Esto se logra ciclo.
{{}} #Each arr
.....
{{/cada}}
arr es una colección.
bloque personalizado
Descrita anteriormente es la incorporada en el manillar, podemos definir su propio bloque para satisfacer sus propias necesidades. Método de definición es muy sencillo de utilizar registerHelper.
hbs.registerHelper ( 'myblock', function (options) {
volver options.fn (this);
});
Puede llamar en la plantilla:
{{#Mi bloque}}
<P> Este es mi myblock </ p> {{title}}
{{/Mi bloque}}
! Si se asume que el contexto de este archivo de plantilla de bloqueo de llamadas tiene un atributo de título cuyo valor es fresco, entonces el resultado de la invocación de lo anterior es:
<P> Este es mi myblock </ p> cool!
El método de generación de una plantilla de la definición de bloque llamando options.fn fragmento de código de la plantilla compilado en el bloque intermedio, que es un método.
recursos
