Reator

O reator no Inter, é um objecto, Map, Set ou Array que quando os seus dados forem alterados, o Inter reagirá às alterações feitas, refletindo os novos dados na Interface.

xxxxxxxxxx

​

<div id="exemplo">

<p> { relogio }  </p>

</div>

​

<script>

​

const ref = Ref({

    in: "exemplo",

    data: { relogio: "0:0:0"  }

   })

​

   setInterval(() => {

​

    const date = new Date();

​

    ref.relogio = date.toLocaleTimeString()

​

   }, 1000)

</script>

​

Se você estiver a ler essa matéria, você provavelmente conhece conceitos do Inter, como a referência, a função Ref retorna um objecto com as mesmas propriedades que o objecto data, e nós devemos usar o referido objecto para atualizar os valores da referências, e na função setInterval, nós atualizamos o valor da referência que existe no exemplo, e o Inter vai reagir à essa alteração atualizando a interface, então, isso significa que o objecto retornada pela função Ref é um reator, reator das referências.

xxxxxxxxxx

​

<div class="demo">

 <div id="lista-de-todo"></div>

</div>

​

<script>

​

const todos = [

    { texto: "Cozinhar", feito: false },

    { texto: "Estudar", feito: true },

    { texto: "Passear", feito: false },

    { texto: "Ouvir música", feito: false  }

]

​

const reatorDaLista = renderList({

    in: "lista-de-todo",

    each: todos,

    do(todo, i){

​

        const styles =  { textDecoration: todo.feito ? "line-through" : null  };

        const done = {  onclick: () => todo.feito = true };

        const Delete = { onclick: () => this.splice(i, 1)  };

​

        return template({

            tag: "div", children: [{

                tag: "h5", text: todo.texto, styles: styles

            },{

                tag: "button", text: "Completar", renderIf: !todo.feito, events: done

            },{

                tag: "button", text: "Deletar", renderIf: todo.feito, events: Delete

            }]

        })

​

    }

})

​

</script>

​

​

No exemplo anterior, a função renderList retorna uma Array reativa(reator), e nós usamos essa Array para modificar a lista, se por exemplo deletarmos um item da Array(em qualquer posição), o elemento na interface que representa o item também será deletado, o primeiro item da Array, é representado pelo primeiro elemento da lista, o segundo item da Array, é representado pelo segundo elemento da lista...

Você sabia que, cada elemento na lista pode ter o seu próprio reator? Usando o mesmo exemplo(o anterior), a lista é baseada é uma Array de objectos não é? E esses objectos são reativos, quando eles forem alterados, a interface também será alterada, o primeiro objecto da Array é o reator do primeiro elemento da lista...

Essa matéria te explicou tudo sobre reator no Inter.