Como empezar
- Instalar Buffalo
- Generando Nuevo Proyecto
- Estructura de Directorio
- Configuración
- Integracion de Herramientas
Gestión de Peticiones
- Enrutamiento
- Controlador de Acciones
- Recursos
- Contexto
- Vinculación de Peticiones
- Middleware
- Manejo de Errores
- Sesiones
- Cookies
Frontend
- Renderizado
- Plantillas
- Diseños
- Parciales
- Helpers
- Helpers Personalizados
- Mensajes Flash
- Formularios
- Recursos
Base de datos
- Iniciando con Pop
- Soda CLI
- Configuración de base de datos
- Integración con Buffalo
- Modelos
- Generadores
- Migraciones
- Fizz
- Mutaciones
- Consultas
- Consultas SQL nativo
- Callbacks
- Scoping
- Asociaciones y Relaciones
- Asociaciones Uno a Uno
- Asociaciones Uno a Muchos
Guías
- Aplicaciones API
- Carga de archivos
- Ejecuciones en segundo plano
- Mailers
- Tareas
- Plugins
- Local Authentication
- Third Party Authentication
- Eventos
- Go Modules
- Localización
- Registros
- Motores de Plantillas
- Pruebas
- Videos
Deploy
Plantillas
Frontend
Templating#
Este documento solo aplica cuando se usa github.com/gobuffalo/buffalo/render.
Consulta github.com/gobuffalo/plush para mas detalles sobre el paquete de plantillas.
Buffalo utiliza por defecto plush as its template engine.
Introducción a Plush#
Plush - Consejos, trucos y pruebas#
Uso general#
Plush te permite capturar las variables de contexto para usarlas en cualquier lugar en tus plantillas.
actions/index.go
templates/index.plush.html
Output
func myHandler(c buffalo.Context) error {
c.Set("name", "John Smith")
return c.Render(http.StatusOK, r.HTML("index.plush.html"))
}
<h1><%= name %></h1>
<h1>John Smith</h1>
Plush Ejemplos#
Condicionales#
IF
ELSE
ELSE IF
Multiple Conditions
<%= if (true) { %>
<!-- some template content -->
<% } %>
<%= if (true) { %>
<!-- content when statement is true -->
<% } else { %>
<!-- content when statement is false -->
<% } %>
<%= if (value == 0) { %>
<!-- content when value is 0 -->
<% } else if (value == 1) { %>
<!-- content when value is 1 -->
<% } else { %>
<!-- content when value is different to 0 and 1 -->
<% } %>
<%= if ((value > 0) && (value < 10)) { %>
<!-- some template content -->
<% } else { %>
<!-- some template content -->
<% } %>
actions/main.go
templates/index.plush.html
Output
func MyHandler(c buffalo.Context) error {
// ...
c.Set("userName", "John Smith")
return c.Render(http.StatusOK, r.HTML("templates/index.plush.html"))
}
<%= if (userName != "") { %>
<span>Welcome <strong><%= userName %>!</strong></span>
<% } else { %>
<span>Welcome Visitor</span>
<% } %>
<span>Welcome <strong>John Smith!</strong></span>
Iteraciones#
A través de Slices#
Cuando recorremos a través de slices, el bloque en el que se realiza el bucle tendrá acceso al contexto “global”.
La sentencia for toma 1 o 2 argumentos. Cuando se usa la versión de 2 argumentos, el primer argumento es el “indice” del bucle y el segundo argumento es el valor del elemento del slice.
actions/main.go
Loop using 2 Arguments
Loop using 1 Arguments
func MyHandler(c buffalo.Context) error {
c.Set("names", []string{"John", "Paul", "George", "Ringo"})
return c.Render(http.StatusOK, r.HTML("index.plush.html"))
}
<!-- templates/index.plush.html -->
<ul>
<%= for (index, name) in names { %>
<li><%= index %> - <%= name %></li>
<% } %>
</ul>
<!-- Output -->
<ul>
<li>0 - John</li>
<li>1 - Paul</li>
<li>2 - George</li>
<li>3 - Ringo</li>
</ul>
<!-- templates/index.plush.html -->
<ul>
<%= for (name) in names { %>
<li><%= name %></li>
<% } %>
</ul>
<!-- Output -->
<ul>
<li>John</li>
<li>Paul</li>
<li>George</li>
<li>Ringo</li>
</ul>
A través de Mapas#
El buble a través de mapas usando el helper each tambien está soportado, y sigue directrices similares al bucle a través de slices.
Cuando se usa la version de 2 argumentos, el primer argumento es la llave del mapa y el segundo argumento es el valor del elemento en el mapa.
actions/main.go
Loop using 2 Arguments
Loop using 1 Arguments
func ColorsHandler(c buffalo.Context) error {
colors := map[string]interface{}{
"White": "#FFFFFF",
"Maroon": "#800000",
"Red": "#FF0000",
"Purple": "#800080",
}
c.Set("colors", colors)
return c.Render(http.StatusOK, r.HTML("home/colors.plush.html"))
}
<!-- templates/index.plush.html -->
<div>
<%= for (name, code) in colors { %>
<span><%= name %>: <%= code %></span>
<% } %>
</div>
<!-- Output -->
<div>
<span>White: #FFFFFF</span>
<span>Maroon: #800000</span>
<span>Red: #FF0000</span>
<span>Purple: #800080</span>
</div>
<!-- templates/index.plush.html -->
<div>
Color codes:
<%= for (code) in colors { %>
<span><%= code %></span>
<% } %>
</div>
<!-- Output -->
<div>
Color codes:
<span>#FFFFFF</span>
<span>#800000</span>
<span>#FF0000</span>
<span>#800080</span>
</div>
Puedes ver más ejemplos en el repositorio plush.