Documentación de Nunjucks

Nunjucks es un potente motor de plantillas para JavaScript que permite generar contenido dinámico utilizando variables, filtros y estructuras de control.

Contexto Disponible

En este entorno tienes acceso al siguiente objeto context:

{
  params: {}, // Query parameters
  table: {    // Contains all available tables
    tableExample: [], // Each table is a list of objects
    anotherTable: []
  }
}

Sintaxis Básica

Variables

Accede a variables utilizando doble llave:

{{ params.name }}
{{ table.tableExample[0].id }}

Condicionales

{% if params.showDetails %}
  Showing details for {{ params.id }}
{% else %}
  No details available
{% endif %}

Bucles

<ul>
{% for row in table.tableExample %}
  <li>{{ row.name }}: {{ row.value }}</li>
{% endfor %}
</ul>

Filtros

Modifica variables utilizando el símbolo:

{{ params.name | upper }}
{{ params.date | date("YYYY-MM-DD") }}
{{ table.tableExample[0].amount | round(2) }}

Filtros Comunes

• upper, lower → Cambiar mayúsculas/minúsculas

• trim → Eliminar espacios

• first, last → Obtener primer/último elemento

• length → Obtener tamaño de arreglo o texto

• sort → Ordenar un arreglo

• join → Unir elementos de un arreglo

Expresiones

{{ table.tableExample[0].price * 1.1 }}
{{ "Price: " + table.tableExample[0].price }}
{{ table.tableExample.length > 0 ? "Has items" : "Empty" }}

Comentarios

{# This is a comment that won't be rendered #}

Ejemplos Prácticos

Formatear una Tabla Dinámica:

<table>
  <thead>
    <tr>
      {% for key in Object.keys(table.tableExample[0]) %}
        <th>{{ key }}</th>
      {% endfor %}
    </tr>
  </thead>
  <tbody>
    {% for row in table.tableExample %}
      <tr>
        {% for key in Object.keys(table.tableExample[0]) %}
          <td>{{ row[key] }}</td>
        {% endfor %}
      </tr>
    {% endfor %}
  </tbody>
</table>

Formato Condicional:

{% for item in table.tableExample %}
  <div class="{% if item.value > 100 %}highlight{% endif %}">
    {{ item.name }}: {{ item.value }}
  </div>
{% endfor %}

Usar Parámetros para Filtrar:

{% if params.filter %}
  <h3>Filtered results for: {{ params.filter }}</h3>
  {% set filteredRows = table.tableExample | filter(row => row.category == params.filter) %}
  {% for row in filteredRows %}
    <div>{{ row.name }}</div>
  {% endfor %}
{% else %}
  <h3>All results</h3>
  {% for row in table.tableExample %}
    <div>{{ row.name }}</div>
  {% endfor %}
{% endif %}

Acceder a Múltiples Tablas:

<div>
  <h3>Table 1: {{ table.tableExample.length }} rows</h3>
  <ul>
    {% for row in table.tableExample %}
      <li>{{ row.name }}</li>
    {% endfor %}
  </ul>
  
  {% if table.anotherTable %}
  <h3>Table 2: {{ table.anotherTable.length }} rows</h3>
  <ul>
    {% for row in table.anotherTable %}
      <li>{{ row.title }}</li>
    {% endfor %}
  </ul>
  {% endif %}
</div>

Agregación de Datos:

{% set total = 0 %}
{% for item in table.tableExample %}
  {% set total = total + item.amount %}
{% endfor %}
<div>Total: {{ total }}</div>

Para información más detallada sobre todas las capacidades disponibles, consulta la documentación oficial de Nunjucks.