Documentação do Nunjucks

Nunjucks Documentation

Nunjucks é um poderoso mecanismo de templates para JavaScript que permite criar conteúdo dinâmico utilizando variáveis, filtros e estruturas de controle.

---

Contexto Disponível

Neste ambiente, você tem acesso ao seguinte objeto context:

{
  params: {}, // Parâmetros de query
  table: {    // Contém todas as tabelas disponíveis
    tableExample: [], // Cada tabela é uma lista de objetos
    anotherTable: []
  }
}

Sintaxe Básica

Variáveis

Acesse variáveis utilizando chaves duplas:

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

---

Condicionais

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

---

Loops

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

---

Filtros

Modifique variáveis utilizando filtros com o símbolo pipe (|):

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

Filtros comuns:

• upper, lower – Alterar maiúsculas/minúsculas

• trim – Remover espaços em branco

• first, last – Obter primeiro/último item

• length – Obter tamanho de array/string

• sort – Ordenar um array

• join – Unir elementos de um array

Expressões

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

---

Comentários

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

---

Exemplos Práticos

Formatando uma tabela

<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>

---

Formatação Condicional

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

---

Utilizando params para filtragem

{% 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 %}

Acessando múltiplas tabelas

<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>

---

Agregando dados

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

Para mais informações, consulte a documentação oficial do Nunjucks.