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

Observação / dúvida Template String

Só uma observação e uma dúvida.

    _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.map(n => {
                            return `
                            <tr>
                                <td>${DateHelper.dataParaTexto(n.data)}</td>
                                <td>${n.quantidade}</td>
                                <td>${n.valor}</td>
                                <td>${n.volume}</td>
                            </tr>
                            `;
                        })
                    }
                </tbody>

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

Eu sem querer, me esqueci de colocar o join('') que transforma esse vetor em uma "Stringona", e o código funcionou normalmente.

A minha dúvida é, será que esse cara aqui ${} (que eu n sei o nome) ele faz o calculo do que tiver que fazer dentro dele, e após isso ele já converte pra string com o próprio join()?

como no new Date(), que o professor comentou que, o objeto Date aceita um vetor, pois o funcionamento interno dele já pega esse vetor e da um join separando por virgula.

Seria algo similar a isso?

7 respostas

Olá! Sem o join não funcionará como o esperado. Se você olhar atentamente, aparecerá ` ``` logo acima do template, que são os separadores do array.

@Flavio

Aqui está tudo normal professor, como se eu tivesse usado o join(''); porem sem usar ele.

meu layout está funcionando e não aparece o `` no meu layout

por isso surgiu essa dúvida, vou testar em outros navegadores pra ver se está normal.

@Edit no Opera / Mozila está tudo ok tambem.

Peço que olhe mais uma vez. Não é raro o aluno não perceber as vírgulas que aparecem no canto esquerdo logo acima da tabela. Você precisa ver para entender que não é uma boa ideia confiar no toString padrão do array e que deve usar join.

Você ainda pode conferir essa resposta

https://cursos.alura.com.br/forum/topico-por-que-preciso-usar-o-join-no-resultado-do-map-31760

Pode conferir também essa resposta

https://cursos.alura.com.br/forum/topico-pra-que-o-join-40679

Legal professor, consegui achar o bendito ```, ele é bem discreto, para ele aparecer bem, você tem que adicionar algumas vezes uma negocição

Vou adicionar uma imagem aqui para esclareces as dúvidas de futuros alunos.

Para ver a imagem no seu tamanho original clique aqui

Outra dúvida que me surgiu.

Pq um vetor consegue "renderizar uma estrutura html"

Exemplo:

Se eu fizer isso:

    _template(model){
        return ["<li>OI</li>"];
    }

Ele me retorna isso no meu layout :

  • OI
  • Como isso é possível? pois ele é um vetor/array, não entendi a lógica.

    solução!

    Porque o js converte para string usando a representação padrão que é usando o separador com vírgula . A vírgula pode ou não ser ignorada dependendo da estrutura do html. Não é boa prática confiar na conversão e você deve garantir que será do seu jeito.

    Veja a documentação de innerHTML https://www.w3schools.com/jsref/prop_html_innerhtml.asp

    Ele teve um texto e não um array.

    Quando vc passa um array o JS utiliza a representação do array de texto que é com vírgula. Se você passa um array com um elemento não terá vírgula. Não é boa prática pelos motivos que lhe falei.

    Ficou tudo claro agora professor, muuuito obrigado pela sua atenção, e bora estudar, que eu só saio daqui como dev full stack haha brinks.