Referência

Referência no Inter, são chaves {}, e dentro dessas chaves, deve ter o nome de uma propriedade do objecto data, e elas(as chaves) serão substituídas pelo valor dessa propriedade, calma aí, vê um exemplo:

<div id="alvo1"> <p>Olá, { mensagem }!</p> </div> <script> const reator = Ref({ in: "alvo1", data: { mensagem: "Aprendiz" } }) </script>

Antes de explicarmos o código, preparei um editor de código online(codePen) para você acompanhar melhor o tutorial, clica em aprendendo o Interjs, o editor vai abrir em outra aba, assim poderás editar e criar códigos usando o Inter.

Lá na tag script, você vê a função Ref não é? Essa função é usada para analisar o template alvo em busca de referências, e ela deve receber apenas um objecto como o seu argumento, o valor da propriedade in, indica o valor do atributo id do elemento pai onde os elementos com as referências se encontram, no nosso exemplo, o elemento pai é a div não é? E por que nós estamos chamando ele de elemento pai? Ele tem um filho, que é o elemento p, e no texto desse elemento tem uma referência chamada mensagem. O valor da propriedade data, deve ser um objecto, em que as suas propriedades serão os nomes das referências, e os seus valores, serão obviamente os textos que vão substituir as referências com os referidos nomes.

Nós usamos a referência quando quisermos que uma determinada parte da nossa interface seja dinámica, então, geralmente é esperado que a referência mude de valor, e é para isso que existe o reator. A função Ref retorna um objecto reativo com as mesmas propriedades que o objecto data, nós usamos esse objecto quando pretendermos mudar os valores das referências, agora nessa página abra o console do navegador e digite: reator.mensagem="Inter é incrível"; ou qualquer outro valor, verás a interface ser atualizada para refletir o novo valor da referência.

<div id="alvo2"> <p>Contando: { contador }</p> </div> <script> const reator2 = Ref({ in: "alvo2", data: { contador: 0 } }) setInterval(() => reator2.contador++, 1000) </script>

A parte da função Ref você já sabe o que está acontecendo, a novidade está no setInterval, você notou que estamos incrementando o valor do contador em cada 1 segundo não é? Isso significa que estamos definindo um valor para a referência contador, então a interface vai ser atualizada para refletir o novo valor.

Ler o valor de uma referência

Nós não podemos apenas definir o valor de uma referência, mas nós também podemos ler o valor de uma referência, fazendo da seguinte forma:

<script> const retorno = reator.nomeDaReferencia; </script>

E a variável retorno vai armazenar o valor da referência.

Referência em atributos

Mas deixa eu te contar um secredo, você sabia que a referência pode ser usada também em atributos HTML? Nós podemos usa-las para ler e definir os valores dos atributos, é isso aí! Nós podemos usar a referência em qualquer atributo HTML, vê o exemplo:

<div id="alvo3"> <p>O valor no input é : " { valorNoInput } "</p> <input type="text" value={valorNoInput} oninput="reator3.valorNoInput = this.value" > </div> <script> const reator3 = Ref({ in: "alvo3", data: { valorNoInput: "Interjs" } }) </script>

O método observe

Eu acredito que você já tenha uma ideia para que esse método serve! Mas vamos lá, ele será um método do objecto reator, ele recebe apenas uma função como o seu argumento, e a referida função será executada toda vez que o valor de uma referência for alterado, e a função será invocada com três argumentos.

• O primeiro argumento vai indicar nome da referência.
• O secundo argumento vai indicar o valor atual da referência.
• O último argumento vai indicar o valor anterior da referência.

<div id="alvo4"> <p>O avô é: { avo }.</p> <p>O neto é: { neto }.</p> </div> <script> const reator4 = Ref({ in: "alvo4", data: { avo: "Bernardo", neto(){ return `William ${this.avo}` } } }) reator4.observe((ref, valorAtual) => { if (ref == "avo") { reator4.neto = `William ${valorAtual}`; } }) </script>

Simples não é? Se nós modificarmos o valor da referência avo, que indica o nome do avô, automaticamente o sobrenome do neto vai ser alterado para refletir o novo valor do avo. Então, abra o console do navegador nessa página e tenta modificar o valor da referência avo, fazendo reator4.avo="novo valor", e verás o que acontece.

A propriedade setRefs

O nome já diz tudo, mas enfim, ela serve para definir os valores de múltiplas referências de uma forma bem elegante e menos cansativa, essa propriedade apenas aceita um objecto como o seu valor, e as propriedades desse objecto devem ser os nomes das referências e os valores, devem ser os novos valores para as respectivas referências.

<div id="alvo5"> <p>{ nome } é { qualidade }</p> <div> <img src={imagem} title="Foto de { nome }" alt="Foto de { nome }"> </div> <button onclick="toggle()">Ver { outro }</button> </div> <script> const primeiro = { nome: "Orlando", outro: "Luna", imagem: "/images/orlando.jpg", qualidade: "amigável" } const segundo = { nome: "Luna", outro: "Orlando", imagem: "/images/luna.jpg", qualidade: "conselheira" } const reator5 = Ref({ in: "alvo5", data: primeiro }) function toggle() { if (reator5.nome == "Orlando") { reator5.setRefs = segundo; } else { reator5.setRefs = primeiro; } } </script>

Se nós tentarmos definir um valor para uma referência que o Inter não conhece, ele vai analisar novamente o template em busca da referência com o referido nome. E agora você conhece tudo sobre referência no Inter.