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.
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 (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 -->
<% } %>
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.
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.
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>