Backbone.js - método Render ()

A vantagem de trabalhar com um Framework MVC é que podemos separar as diferentes áreas da aplicação em camadas, já sabemos que o modelo e o controlador são as camadas responsáveis ​​por dar a funcionalidade interna e implementação lógica à nossa aplicação, porém é na parte da vista onde o maior impacto é criado, pois é o que o usuário verá.
Para gerir a vista temos várias opções, sabemos que temos que ter um template engine, o interessante é que podemos usar uma das muitas opções e para nos permitir isso, temos o método render () que é o que chamará o modelo e exibirá os dados.
Método Render ()
Se precisarmos definir a lógica de como exibir um modelo, podemos usar o método opcional render ().
ImportanteNeste tutorial, vamos usar Sublinhado como um mecanismo de modelo e, adicionalmente, vamos tomar o seguinte HTML como base:

Aqui vemos como fazemos um bloco para o qual definimos que seu tipo será texto / modelo e nós adicionamos um modelo de id, isso nos ajudará quando estivermos enviando as informações para o mecanismo de template.
Funcionamento
Existe um método em Sublinhado chamado ._modelo que compila o código do modelo em Javascript e o transforma em funções que podemos avaliar e exibir.
Por exemplo para o método passamos os rótulos que ele usará usando um id no caso do código anterior ser o id-template, com isso, o método ._template você já sabe para onde retornar os dados.
Então ele método render () usa o modelo passando dados para ele usando o método toJSON () que de alguma forma traduz os atributos do modelo que associamos à visualização. Em seguida, o modelo retorna o HTML concreto e o adicionamos ao Árvore DOM do documento usando o propriedade $ the.

Isso pode parecer muito trabalhoso, mas tudo é realmente feito pelo framework junto com o template engine, então nossa intervenção é muito mais simples do que se tivéssemos que fazer tudo isso sem a sua ajuda.

Exemplos de uso
Há uma convenção em que devemos devolva isso no final do método render (), Isso nos ajuda a tornar as visualizações reutilizáveis ​​em outras visualizações e também a criar listas de elementos que serão desenhadas quando todos os elementos estiverem presentes e não um por um, economizando alguns recursos.
Vejamos a seguir a imagem de um exemplo de como construir uma visualização de lista:

Vemos que dentro do método render () usamos isso para adicionar à propriedade $ the, o conteúdo do modelo e então podemos retornar tudo isso com o devolva isso.
Bastante simples de implementar, mas muito útil, pois isso nos permitirá usar essa lista até mesmo como uma subvisão dentro de outras visões pai.
Terminamos o tutorial conhecendo o método render () e sua grande importância na definição de vistas que podem ser reutilizáveis.Gostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo