# Mustache

A notação Mustache desempenha um papel fundamental no desenvolvimento de APIs ao permitir a separação clara entre a lógica de negócios e a apresentação de dados. Em um contexto de API, onde os dados são frequentemente transmitidos entre servidores e clientes, a notação Mustache oferece uma maneira simples e eficaz de estruturar e exibir esses dados de forma dinâmica.

<figure><img src="https://215079342-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F226k0cnPTn1PWu9xHcK8%2Fuploads%2FwVGMZXL6VV3MBB5Ej6SI%2Fanatomia.png?alt=media&#x26;token=e596c6bf-5397-4b46-ba26-7acb368df70e" alt=""><figcaption></figcaption></figure>

## O que é Mustache?

No caso do Floui a notação Mustache é amplamente utilizada para manipular e exibir valores através de objetos Javascript que são transferidos entre conectores dentro do fluxo.

<figure><img src="https://215079342-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F226k0cnPTn1PWu9xHcK8%2Fuploads%2FKSarsTjyzRntgWpDIGlb%2Fimage.png?alt=media&#x26;token=a3bbe527-f488-4ade-af4b-b6f2185ce8e5" alt=""><figcaption><p>Utilizando notações Mustache na plataforma Floui.</p></figcaption></figure>

No Floui, as cargas de saída relacionados a um determinado componente podem ser acessadas por [`msg.payload`](https://docs.floui.io/guia/conectores/estrutura-do-conector#anatomia-de-um-conector) (saiba mais sobre a [Anatomia de um conector Floui](https://docs.floui.io/guia/conectores/estrutura-do-conector#anatomia)).

Neste contexto, os campos geralmente são referenciados usando essa sintaxe a partir do objeto da mensagem que trafega pelo fluxo. Por exemplo, se quisermos utilizar o valor de um campo específico na mensagem, utilizamos algo semelhante à notação `{{msg.payload}}`

## Sintaxe básica

1. **valores de variáveis**

   As variáveis são representadas entre chaves duplas `{{ }}` e sem espaços internos.

   * Exemplo: `{{nome}}`

   No contexto de uma API, `nome` seria uma variável que seria substituída pelo valor correspondente quando o template fosse renderizado.
2. **utilizando com HTML**

   Para evitar a interpretação de HTML nas variáveis, você pode usar chaves triplas `{{{ }}}`.

   * Exemplo: `{{{conteúdoHTML}}}`

   Isso é útil para evitar ataques de injeção de código (XSS), já que o conteúdo HTML será tratado como texto simples.
3. **criando seção:**

   As seções são usadas para lidar com listas ou estruturas condicionais.

   * `{{# secao }}` indica o início de uma seção.
   * `{{/ secao }}` indica o final de uma seção.

No exemplo a seguir, **`produtos`** é uma lista de objetos e o template dentro da seção será repetido para cada objeto na lista.

{% code title="" overflow="wrap" lineNumbers="true" %}

```mustache
var produtos = [
  {
    descrição: "Blusa feminina tam M",
    cores: ["Azul", "Preta", "Branca", "Ciano"]
  },
  {
    descrição: "Shorts feminino tam P",
    cores: ["Azul", "Preta", "Branca", "Ciano"]
  }
];

{{#produtos}}
  {{descrição}}
  {{#cores}}
    {{.}}
  {{/cores}}
{{/produtos}}

```

{% endcode %}

{% hint style="info" %}
O ponto na linha 15 dentro do bloco `{{#cores}}` representa o contexto atual da iteração. Neste caso, ele se refere a cada elemento individual no array de cores.
{% endhint %}

## Acessando um atributo

Considere o seguinte objeto JSON:

{% code title="msg.payload" overflow="wrap" lineNumbers="true" %}

```json
{
    name:'Floui',
    site: 'https://floui.io/',
    app: 'https://app.floui.io/', 
    since : [2021, 2022, 2023]   
}
```

{% endcode %}

Agora, para acessar o atributo que contém uma string com o link para o site da plataforma, precisamos usar `{{msg.payload.app}}` ou ainda, podemos acessar os demais atríbutos alterando apenas o caminho:

* `{{msg.payload.app}}` -> <https://app.floui.io/>
* `{{msg.payload.name}}` -> Floui

## Helpers

<table data-full-width="false"><thead><tr><th width="224">Helper</th><th width="280.3333333333333">Função</th><th>Exemplo de uso</th></tr></thead><tbody><tr><td><code>var</code></td><td>Substitui a expressão por um valor de variável cadastrada no Floui</td><td>{{var nome_da_variavel}}</td></tr><tr><td><code>json</code></td><td>Substitui a expressão por um objeto Javascript convertido em JSON (String)</td><td>{{json msg.payload}}</td></tr><tr><td><code>to_float</code></td><td>Substitui a expressão pelo valor já convertido para <code>float</code></td><td>{{to_float msg.price}}</td></tr><tr><td><code>to_int</code></td><td>Substitui a expressão pelo valor já convertido para <code>integer</code></td><td>{{to_int msg.payload.ID}}</td></tr><tr><td><code>to_base64</code></td><td>Substitui a expressão pelo valor já convertido para <code>base64</code></td><td>{{to_base64 msg.response.data}}</td></tr><tr><td><code>to_slug</code></td><td>Substitui a expressão pelo valor convertido em um <em>Slug</em>, substituindo caracteres especiais por traços. </td><td><code>uma-frase-em-forma-de-slug</code></td></tr><tr><td><code>var timestamp</code></td><td>Substitui a expressão pelo valor de timestamp do momento da execução do Flow</td><td>{{var timestamp}}</td></tr><tr><td><code>var workspace_url</code></td><td>Substitui a expressão pelo valor da URL pública do workspace</td><td>{{var workspace_url}}</td></tr><tr><td><code>var current_time</code></td><td>Substitui a expressão pelo horário da execução do fluxo</td><td>{{var current_time}}</td></tr><tr><td><code>var current_datetime</code></td><td>Substitui a expressão pela data e horário da execução do fluxo</td><td>{{var current_datetime}}</td></tr><tr><td><code>var current_date</code></td><td>Substitui a expressão pela data da execução do fluxo</td><td>{{var current_date}}</td></tr></tbody></table>