Lista

Para renderizar uma lista, nós usamos a função nativa do Inter chamada renderList, como as outras funções, ela apenas recebe um objecto como o seu argumento e o referido objecto deve ter as seguintes propriedades:

in - Deve ser uma string que vai indicar o valor do atributo id do elemento onde a lista será renderizada.
optimize - Essa propriedade foi adicionada desde a versão 2.2.3, ela serve para optimizar a performance da lista, vai até a parte que fala sobre a opção optimize nessa matéria para uma explicação mais detalhada.
each - Representa os dados em que a lista será baseada, o valor dessa propriedade pode ser uma Array, um objecto, Set, Map ou um número.
do - Deve ser um método, e ele será invocado pela quantidade de dados. Para mais info vai até à parte que fala sobre a opção do nessa matéria.

A função template

O template da nossa lista deve ser expresso com a função template, essa função recebe apenas um objecto como o seu argumento e o referido objecto aceita as seguintes propriedades:

tag(obrigatório) - O valor dessa propriedade deve indicar o nome da tag que será criada, o valor deve ser apenas uma string ou uma função. Se for uma função, ela deve retornar uma string(que vai representar o nome da tag).
text - O valor dessa propriedade vai indicar o texto do elemento criado. Se o valor for null ou undefined, o texto não será criado, e se o valor for uma função, ela será invocada e o valor retornado pela função vai representar o texto do elemento.
renderIf - Essa propriedade antes da versão 2.1.0 aceitava apenas valores booleano, mas agora se o valor da referida propriedade for null, undefined, false, 0 ou uma string vázia, o elemento não será renderizado, caso o contrário(se for qualquer valor menos os citados), o elemento será renderizado.
attrs - Deve ser um objecto, e as propriedades do referido objecto serão os atributos do elemento e os valores das propriedades serão os valores dos respectivos atributos. Se o valor for uma função, a função será invocada e o valor retornado pela função será o valor do atributo. Se o valor for null undefined, ou false o atributo não será criado.
events - Deve ser um objecto, e as propriedades do referido objecto serão os eventos que o elemento escutará, e os valores das propriedades devem ser funções que serão invocadas quando os eventos ocorrerem, e o nome do evento deve ser oficial do DOM.
styles - Deve ser um objecto, e as propriedades do referido objecto serão os nomes dos estilos que serão aplicados no elemento, e os valores, serão os valores dos respectivos estilos. Se o valor for uma função, a função será invocada e o valor retornado pela função será o valor do estilo. Se o valor for null ou undefined, o estilo não será criado, e o nome do estilo deve ser oficial do CSS.
children - Deve ser uma Array de objectos que aceitam as mesmas propriedades que o objecto da função template, e os elementos produzidos na referida Array, serão os filhos do elemento que estamos a nos referir.

Vê um exemplo:

Opção do

Dentro do metódo do, a palavra-chave this, indica o reator da lista e a função renderList também retorna o reator da lista. O referido método deve retornar a função template.

O número de argumentos que esse método recebe, depende do valor da opção each. Se o valor for uma Array, essa função vai receber três argumentos.

O primeiro argumento será o item atual na iteração.
O segundo argumento será a posição do item atual na Array.
O terceiro argumento será o reator da lista.

Se o valor for Set, a função vai receber dois argumentos.

O primeiro argumento será o item atual na iteração.
O segundo argumento será o reator da lista.

Se o valor for objecto ou Map, a função vai receber três argumentos.

O primeiro argumento será o nome da propriedade atual na iteração.
O segundo argumento será o valor da propriedade.
O terceiro argumento será o reator da lista.

Cartão de Programador(a)

Use o objecto cartao para modificar a lista.

Se o valor da opção each for um número(Number), a função vai receber apenas um argumento, que será o número atual na iteração.

O reator da lista

O Inter é reativo por padrão, então, quando você alterar os dados da lista, o Inter vai se aperceber e atualizar a lista para refletir as novas informações.

Se o valor da opção each for Array, objecto, Map ou Set, se você usar um método que modifica os dados em que a lista for baseada, o Inter vai reagir à essa alteração. Volte para o primeiro exemplo nessa matéria, abra o console e tenta fazer o seguinte: reator[0].nome="Jonatan", você vai ver que a parte da interface que usa aquele valor será atualizada, ou ainda podes ir mais longe, fazendo assim: reator.push({nome:"Teu nome", idade:"Tua idade", casado:false}), você vai acrescentar um item no final da lista.

E o reator da lista tem as seguintes propriedades:

SetEach

Essa é uma propriedade reativa, só de definição, é usada quando quisermos definir outros dados em que listagem será baseada. Quando usamos a referida propriedade é como se estivéssemos a redefinir o valor da opção each.

<div>
    <h3>Lista dos teus amigos</h3>
    <div id="lista2"></div>
    <button onclick="lista2.setEach = amigos1">Pag 1</button>
    <button onclick="lista.setEach = amigos2">Pag 2</button>
</div>
<div>

const amigos1 = [
    { nome: "Anny", imagem: "/images/Anny.jpg", amigosEmComum: 0 },
    { nome: "Orlando", imagem: "/images/orlando.jpg", amigosEmComum: 7 }
];
const amigos2 = [
    { nome: "Luna", imagem: "/images/luna.jpg", amigosEmComum: 2 },
    { nome: "Ramon", imagem: "/images/Ramon.jpg", amigosEmComum: 0 }
];

const lista2 = renderList({
    in: "lista2",
    each: amigos1,
    do(amigo){

const imgAttrs = { src: amigo.imagem, alt: "Uma pessoa" };
    const pText = `${amigo.amigosEmComum} amigos em comum`

return template({
            tag: "div", children: [{
                tag: "h4", text: amigo.nome
            },{
                tag: "div", children: [{
                    tag: "img", attrs: imgAttrs
                }]
            },{
                tag: "p", text: pText, renderIf: amigo.amigosEmComum
            }]
        })
    }
})

</script>

Lista dos teus amigos

Opção optimize

Essa propriedade(opção) faz parte do Inter dese a versão 2.2.3

Quando a lista for super grande, de milhares de itens e os containeres correspondentes à cada item tiverem inúmeros elementos aninhados, você vai notar uma certa queda de performance ao atualizar a lista, com a propriedade optimize definida para true a performance da lista no Inter vai até às nuvens! Mas esse ganho de performance tem uma desvantagem. Vê o exemplo:

<div id="estudantes"></div>
 <script>
 
    const estudantes = [
        { nome: "Alberto Sampaio", nota: 14, professor: "João Costa", novoProf: false },
        { nome: "Angelina Guilherme", nota: 8}
    ]

renderList({
        in: "estudantes",
        each: estudantes,
        optimize: true,
        do(estudante) {

const { nome, nota, professor, novoProf} = estudante
            const buttonEvents = { onclick: () => estudante.novoProf = true };
            const done = { onclick: () => estudante.novoProf = false };
            const inputAttrs = { type: "text", value: professor, placeholder: "Digite" };
            const inputEvents = { oninput: (e) => estudante.professor = e.target.value }
			const h4Text = `Estudante: ${nome} ${nota > 10 ? "passou de ano" : "vai repetir"}`

return template({
                tag: "div", children: [{
                    tag: "h4", text: h4Text
                },{
                    tag: "p", text: `O professor: ${this[0].professor}`
                },{
                    tag: "button", text: "novo Prof", renderIf: novoProf == false,
					events: buttonEvents
                },{
                    tag: "div", renderIf: novoProf, children: [{
                        tag: "input", attrs: inputAttrs, events: inputEvents
                    },{
                        tag: "button", text: "Feito", events: done
                    }]
                }]
            })
        }
    })

</script>

No exemplo anterior, nós usamos a opção optimize para optimizar a listar, que particularmente nesse caso é disnecessário só foi usado para exemplificar a desvantagem. Nós temos a Array estudantes que vai ser usado como os dados da nossa lista, mas um detalhe curioso é que, apenas o primeiro item(objecto) da lista tem as propriedades professor e novoProf, tecnicamente não tinha como nós apresentarmos o valor da propriedade professor no segundo elemento HTML da lista, baseando-se nas propriedades do segundo objecto, então nós usamos a professor do primeiro objecto, até aí tudo bem, o outro porém, é que quando se usa a propriedade optimize por exemplo, se uma das propriedades do primeiro item(objecto) da lista for alterada, o sistema de renderização da lista vai atualizar apenas o elemento correspondente(o primeiro container), já que o primeiro item da lista representa o primeiro elemento HTML da lista, assim o sistema de renderização evita trabalho desnecessário ao procurar alterações em outros elementos HTML da lista. No nosso exemplo, quando uma das propriedades do primeiro objecto da Array for alterada, o Inter vai supor que apenas o primeiro elemento da lista foi atualizado, já que seu reator(objecto correspondente) foi atualizado, então não vai procurar alterações no segundo elemento HTML da lista, já que as propriedades do segundo objecto da lista estão intáctas.

A lição é: Quando você utilizar essa opção para optimizar a lista, certifique-se que cada container(elemento da lista) use apenas os dados dos objectos correspondentes, por exemplo, o segundo elemento da lista use apenas os dados do segundo objecto da lista.

Eu disse que no nosso exemplo, o uso da referida propriedade não faz diferença, não é? Queres um exemplo em que ela faça a diferença(aumenta a performance)? Clica em optimização da lista.

Método observe

Esse método faz parte do Inter desde a versão 2.1.0.

Esse método aceita apenas uma função como o seu argumento, e a referida função será invocada toda vez que os dados forem alterados, e a função será invocada com um argumento, que será o reator da lista.

<div id="metodoObserve">
    <p>Tem { numeroDeLings } linguagens de programação
        na lista, e você removeu { removidas }
    </p>
    <div id="lingsDeProgramacao"></div>

</div>

const lingsDeprogamacao = [
    "Javascript", "Typescript", "C++" , "Go", "Dart", "Rust", "PHP", "Foltran"
    ];
    
let len = lingsDeprogamacao.length;

const ref = Ref({
    in: "metodoObserve",
    data: { removidas: 0, numeroDeLings: len }
})

const listaDeLings = renderList({
    in: "lingsDeProgramacao",
    each: lingsDeprogamacao,
    do(ling, i){

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

return template({
            tag: "div", children: [{
                tag: "h4", text: ling
            },{
                tag: "button", text: "Deletar", events: buttonEvents
            }]
        })
    }
})

listaDeLings.observe((reator) => {
    ref.setRefs = {
         removidas: reator.length < len ? ref.removidas+1 : ref.removidas,
         numeroDeLings: reator.length
    }

len = reator.length;
})

</script>

Tem { numeroDeLings } linguagens de programação na lista, e você removeu { removidas }

AddItems

Disponível apenas quando o reator for uma Array.

Esse método é usado para acrescentar uma certa quantidade de dados na Array reatora. Ele aceita dois argumentos, o primeiro argumento deve ser uma Array, e os itens daquela Array serão adicionados na Array reatora. O segundo argumento deve ser um número, que vai indicar a posição em que os itens serão adicionados. Se a posição for 0 ou menor que zero(número negativo), os itens serão adicionados no princípio da Array reatora, se a posição for omitida ou se for maior que o número de itens da Array reatora, os itens serão adicionados no final da Array, caso contrário, os itens serão adicionados na posição pretendida. Já não será necessário te dizer que o Inter vai atualizar a interface para refletir as novas informações não é?

SetProps

Essa propriedade faz parte do Inter desde a versão 2.1.0, e ela estará disponível apenas quando o reator for um objecto ou um Map.

Como o nome a descreve, essa propriedade é usada quando pretendermos atualizar o valor de várias propriedades. Ela aceita apenas um objecto como o seu valor, e as propriedades do referido objecto devem indicar os nomes das propriedades que os seus valores serão alterados, e os valores, serão os novos valores para as respectivas propriedades.

Se a opção each for número

A opção each pode receber um número como o seu valor, e o método do será executado contando de 0 até o referido número menos 1. O método do será executado com apenas 1 argumento, e referido argumento vai indicar o número atual(de 0 até o número anterior do valor da opção each) na iteração.

Lista aninhada

Se por ventura, nós quisermos fazer uma listagem em uma lista? Como fazemos isso? Vamos ter que usar o método Map da Array. Vê um exemplo

O método Map retorna uma Array não é? No nosso exemplo o valor da variável ulChildren será uma Array de objectos e essa mesma Array é passada como o valor da propriedade children, sabes o que acontece depois não é? Esses objectos da Array ulChildren vão representar os elementos da lista. As listas aninhadas também são altamente reativas, se você abrir o console do navegdor nessa página e tentar modificar as Arrays filhos a interface será atualizada instantaneamente para reflitir os novos dados.

Quando por exemplo, o valor da opção each for uma Array de objectos, o Inter vai definir algumas propriedades reativas nos referidos objectos. E elas são:

setProps

Essa propriedade funciona como a setProps do reator da lista, mas só que, as propriedades do objecto que estamos a nos referir é que serão atualizadas, ou seja, ela(setProps) é usada para atualizar os valores das propriedades do objecto de uma maneira elegante e performática. A setProps aceita apenas um objecto como o seu valor, e as propriedades do referido objecto devem indicar o nome das propriedades que os seus valores serão alterados, e os valores, serão os novos valores para as respectivas propriedades.

defineProps

Essa propriedade é similar à setProps, a diferença é que nós usamos a referida propriedade para adicionar propriedades reativas no objecto.

Lista de trabalhadores

No exemplo anterior, a lista foi baseada em uma Array de objectos, e você provavelmente notou que os dois últimos objectos não têm a propriedade aposentado, se nós adicionarmos ela directamente nos referidos objectos, ela não será reativa, ou seja, quando ela for alterada a interface não será atualizada, então, nós usamos a propriedade só de definição nativa do Inter, que é a defineProps, assim o Inter consegue monitorar as alterações que forem feitas nessa propriedade.

deleteProps

Nós usamos essa propriedade para deletar as propriedades do objecto e reagir à essa alteração, ou seja, ela é uma propriedade reativa como as que já foram mencionadas, quando nós usarmos essa propriedade para deletar as propriedades do objecto, o Inter vai se aperceber e vai atualizar a interface para refletir as novas informações. Essa propriedade só aceita uma Array como o seu valor, e os itens da referida Array devem ser strings que devem indicar os nomes das propriedades que serão deletadas.

Essa matéria te explicou tudo sobre lista no Inter. Agora dê uma olhada no exemplo abaixo.

<div id="app">
    <h4 _if="temTarefas">Tens { numeroDeTarefas } tarefas agendadas.</h4>
    <div>
        <p _if="temValorNoInput">Vais adicionar "{ texto }"</p>
        <input 
         type="text"
         placeholder="Digite a tarefa" 
         value={texto}
         oninput="ref1.texto = this.value"
         >  
         <button onclick="adicionarTarefa()" _if="temValorNoInput">Adicionar</button>
    </div>
    <div id="lista-de-tarefas"></div>
</div>

const ref1 = Ref({
    in: "app",
    data: { numeroDeTarefas: 0, texto: ""  }
})

const _if = renderIf({
    in: "app",
    data: { temTarefas: false, temValorNoInput: false   }
})

ref1.observe((nome, valor) => {
    if (nome == "texto") _if.temValorNoInput = valor.trim().length > 0;
    if (nome == "numeroDeTarefas") _if.temTarefas = valor > 0;
})

const reatorDaLista = renderList({
    in: "lista-de-tarefas",
    each: [],
    do(tarefa, i){

return template({
            tag: "div", children: [{
                tag: "h4", text: `Tens que: ${tarefa.titulo}`
            },{
                tag: "div", renderIf: !tarefa.editar , children: [{
                    tag: "button", text: "Deletar", events: deletar
                },{
                    tag: "button", text: "Editar", events: editar
                }]
            },{
                tag: "div", renderIf: tarefa.editar, children: [{
                    tag: "input", attrs: inputAttrs, events: inputEvents
                },{
                    tag: "button", text: "Salvar", events: salvar
                }]
            }]
        })

}
})

reatorDaLista.observe((reator) => ref1.numeroDeTarefas = reator.length);

function adicionarTarefa(){
    const tarefa = { titulo: ref1.texto, editar: false  };
    reatorDaLista.unshift(tarefa);
    ref1.texto = "";
}

</script>

Tens { numeroDeTarefas } tarefas agendadas.

Vais adicionar "{ texto }"