Backbone.js - El Element

No momento, sabemos que as visualizações em Backbone.js Eles trabalham com a lógica de como apresentar as informações estruturadas com o modelo, surge a questão de como expressamos isso em nossa aplicação, o que fazemos é trabalhar com os elementos do Árvore DOM para que possamos inserir por Javascript os diferentes conteúdos em nosso modelo.
Para atingir esses objetivos, temos o elemento "a" que se refere ao nome do Elemento DOM com o qual identificamos nossa parte da visão.
Que é o"?
Este elemento é o componente central ou propriedade de nossa visão, uma vez que é a referência ao Elemento DOM que é obrigatório que as visualizações tenham. Uso de visualizações "a" como a propriedade com a qual redigimos o conteúdo e que, em seguida, será inserida no DOM.
Existem duas maneiras pelas quais podemos associar um Elemento DOM com a visão, o primeiro está criando um novo e adicionando-o ao DOM e ao segundo está fazendo uma referência a um existente na página.
Criação de um novo elementoSe quisermos criar um novo elemento, devemos usar as propriedades: tagName, id e className, desta forma o framework ficará encarregado de criar o novo elemento para nós e uma referência ao referido elemento estará disponível no propriedade "o", no caso de deixarmos o tagName vazio por padrão será criado como um div.
Vamos ver o código a seguir, onde podemos apreciar o que aprendemos até agora:

 var TasksView = Backbone.View.extend ({tagName: 'ul', // é obrigatório, mas se o deixarmos vazio, será considerado div className: 'container', // é opcional, mas podemos atribuir vários id de classes: 'tarefa', // opcional}); var TasksView = new TasksView (); console.log (tasksView .el); // irá imprimir

Como podemos ver, criamos uma visão de uma forma básica, estendendo ou herdando de Backbone.View, então com as propriedades mencionadas atribuímos a elas um valor, finalmente instanciamos e com um console.log () nós vemos o resultado.
Na imagem a seguir, podemos ilustrar como isso fica em nosso Console do Chrome:

Aqui, vemos como poderíamos gerar um elemento com o rótulo

que especificamos em nossa construção de visão.
Método SetElement
Este método é usado quando queremos aplicar a visualização a um elemento DOM diferente que já existe, então ele criará uma nova referência $ the, que não será anexado ao elemento original, mas apontará para o novo, tudo isso dependendo do evento que chamamos.
Vamos ver no código a seguir como aplicamos isso:


 // Criamos dois elementos DOM que representam botões var button1 = $ (''); var button2 = $ (''); // Definimos uma nova visão var View = Backbone.View.extend ({events: {click: function (e) {console.log (view.el === e.target);}}}); // Criamos uma instância da visualização e a aplicamos ao elemento button1 // para button1 var view = new View ({el: button1}); // Agora aplicamos a visualização ao elemento button2 com o método setElement view.setElement (button2); button1.trigger ('clique'); button2.trigger ('clique'); 


Isso deve retornar um valor verdadeiro quando executamos o evento no elemento button2 Como a visualização foi alterada para ela, vamos ver a imagem que se refere ao explicado acima para finalizar o tutorial:




Gostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo