Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Para que serve o .join('') que é usado no exemplo?

Dentro da template string, após usar o map em model é usado uma função chamada join() pesquisei um pouco sobre ela e vi que ela junta um array com um separador que é passado como parâmetro.

No exemplo em questão, eu testei o código trocando o valor dela, e até mesmo sem a função, e aqui funcionou normal...

Vou compartilhar a minha classe:

class NegociacaoView {

    constructor(elemento) {
        this._elemento = elemento;
    }

    _template(model) {
        return `
        <table class="table table-hover table-bordered">
            <thead>
                <tr>
                    <th>DATA</th>
                    <th>QUANTIDADE</th>
                    <th>VALOR</th>
                    <th>VOLUME</th>
                </tr>
            </thead>

            <tbody>
                ${
                    model.listaNegociacoes.map(n => {
                    return `
                        <tr>
                            <td>${DateHelper.dataParaTexto(n.data)}</td>
                            <td>${n.quantidade}</td>
                            <td>${n.valor}</td>
                            <td>${n.volume}</td>
                        </tr>
                    `
                    }).join('') // Função em questão
                }

            </tbody>

            <tfoot>
            </tfoot>
        </table>       
        `;
    }

    update(model) {
        console.log(model);
        this._elemento.innerHTML = this._template(model);
    }
}
2 respostas

Olá Naldson, tudo bem por aí?

Sobre a questão mencionada, mesmo não utilizando a função "join", ainda funciona a inclusão dos dados.

Porém, cada vez que for adicionar dados na sua aplicação, também surge 'vírgulas' logo acima da tabela.

Isso é devido ao Template HTML mostrar os conteúdos dos itens e o separador ',' quando for exibir um array.

//HTML Template
console.log(` ${['testando','  HTML','  Template']} `)

//Resultado
 testando,  HTML,  Template

Tente incluir mais de dois dados e inspecione o elemento gerado para conferir o erro.

Abraço!

solução!

Oi, o join em questão é pra juntar todos os itens da array pelo separador definido (no caso, nada ''). Como tu tás usando um .map(), o retorno é uma array que, concatenada te trará uma lista, por exemplo:

var lista = [1,2,3];
`teste ${lista.map(numero => numero)}`

retornará teste 1,2,3.

Agora, com o join:

var lista = [1,2,3];
`teste ${lista.map(numero => numero).join('')}`

temos os itens juntos, sem separador: teste 123.

Mas por qual motivo eu não posso deixar as vírgulas?

Como tu tás concatenando HTML, se não usares o join acabarias com o HTML separado por vírgula - e inválido. Algo mais ou menos assim:

var lista = [1,2,3];
`${lista.map(numero => {
    return `<tr>
        <td>${numero}</td>
    </tr>
    `
})}`

e a saída:

<tr>
        <td>1</td>
    </tr>
    ,<tr>
        <td>2</td>
    </tr>
    ,<tr>
        <td>3</td>
    </tr>