Cómo incluir lógica condicional en los templates de Lit, por medio del operador ternario que permitirá crear condicionales utilizando la propia sintaxis de Javascript que ya conoces.
En este artículo vamos a comenzar a aportar algo de lógica a los templates. De este modo podemos conseguir vistas que tengan cierta inteligencia. Comenzaremos con algo tan simple como son los condicionales en templates.
Por supuesto, la lógica a incluir en una vista será bastante limitada, porque los cálculos complejos tendríamos que ponerlos dentro de métodos. Un buen recurso sería el de las propiedades computadas que ya vimos en un artículo anterior. Sin embargo, cosas como condicionales o recorridos a bucles los podremos hacer sin ningún problema y de hecho son operaciones habituales en las vistas del componente.
Para qué nos sirven los condicionales en los templates
Los condicionales en la vista sirven para mostrar unas cosas u otras en función de la evaluación de una sentencia.
Pondremos un par de ejemplos de cosas donde podríamos usar condicionales:
- Si tenemos la fecha de inicio de un evento, podríamos mostrar el número de días que quedan para que ese evento se produzca. Si no tenemos tal fecha, simplemente no mostraremos nada o pondremos algo como "próximamente…".
- Si tenemos un error de entrada de datos, entonces podríamos mostrar cierto mensaje en rojo.
Por supuesto, en la vida real podemos encontrar infinitos ejemplos de cómo un condicional puede ayudarnos en un template.
Operador ternario para implementar condicionales en templates Lit
Los condicionales en los templates de Lit se realizan mediante código Javascript de toda la vida. Para implementarlos usaremos el operador ternario de Javascript, colocando su código dentro del template.
Podemos ver un ejemplo en el siguiente método render().
render() {
return html`
${this.active ? 'Estoy activo' : 'No estoy activo'}
`
}
Como puedes comprobar, tenemos que usar la sintaxis para interpolación dentro de los template strings. Dentro, en vez de interpolar una variable colocamos el operador ternario, lo que hará que se muestre un texto u otro dependiendo de la condición.
En ocasiones el bloque que quieres colocar en el caso positivo o negativo contiene etiquetas HTML, en cuya caso necesitaremos apoyarnos en el tagged template literal "html", tal como puedes ver a continuación.
render() {
return html`
${this.active
? html`<p>Estoy <b>activo</b></p>`
: html`<p><b>NO</b> estoy activo</p>`
}
`
}
La indentación de las distintas expresiones para el caso positivo y negativo no es necesaria, ni tan siquiera colocarlo en varias líneas. Simplemente lo hacemos para facilitar la lectura del condicional.
Mejora del componente card
Vamos a realizar un ejemplo para mostrar el uso de condicionales en los templates de Lit, usando el componente dw-card que hemos comenzado en el artículo anterior dedicado a la composición de templates.
Básicamente queremos comprobar si el usuario ha indicado un título o no en la tarjeta, en cuyo caso no hace falta poner h2 que mostraría el título. Para ello usaremos un condicional en el template.
Así nos quedaría el sub-template que muestra el título, una vez colocado el bloque condicional.
titleTemplate() {
return html`
${this.title
? html`<h2>${this.title}</h2>`
: ''
}
`
}
Además, podríamos hacer algo parecido con las acciones del pie de la tarjeta. Si no tenemos ninguna URL de la acción o no tenemos el texto de la acción, entonces simplemente no queremos que aparezca el bloque de las acciones.
En este caso me tocaría modificar el método render, porque no quiero poner el section de las acciones.
render() {
return html`
<article>
<section class="main">
${this.titleTemplate()}
${this.bodyTemplate()}
</section>
${!this.actionUrl || !this.actionLabel
? ''
: html`
<section class="actions">
${this.actionsTemplate()}
</section>
`
}
</article>
`;
}
También he tenido que cambiar el CSS del borde que separa las acciones del cuerpo de la tarjeta, pues estaba en el artículo anterior como un border-bottom en el section de class="main" y lo he pasado a border-top del section de class="actions". Ya que, si no hacía el cambio, se me colocaba siempre el border-bottom en el main, que no es necesario si no hay acciones que mostrar.
Para ver el código completo del componente, tal como lo tenemos después de este artículo, te recomendamos ir directamente a GitHub.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...