Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

Visão Geral
Visões do Backbone provêm convenção e abstração úteis para interfaces de usuário. Contudo, para incluir funcionalidades de UI em aplicações que o Backbone, por conta própria, não foi criado pra suportar, é preciso considerar como integrar efetivamente funcionalidade customizada ou de terceiros nela. Como resultado, desenvolvedores devem navegar pelos desafios e evitar conflitos complicado entre bibliotecas externas e o Backbone.
Introdução ao Backbone.js
Backbone é uma forma fantástica de organizar código no lado do cliente. Com abstrações como modelos, visões e coleções, o Backbone ajuda desenvolvedores sérios a escrever aplicações bem organizadas e escaláveis.
Embora haja várias alterantivas ao Backbone, incluindo Angular e Ember, o Backbone dá liberdade aos desenvolvedores a escreverem e organizarem seus códigos de forma natural e confortável sem ser muito opinativa sobre como o Modelo de Objeto do Documento (DOM) se parece.
A Pele das Visões do Backbone
Visões são um dos componentes mais poderosos e flexíveis do Backbone. De acordo com os autores dele:
Visões do Backbone são mais convenção que código — não determinam padrões de HTML ou CSS por você e podem ser usadas com qualquer biblioteca de modelagem em JavaScript.
Ela são usadas para manipular o que os usuários veem no navegador e facilitam a comunicação entre os modelos. Como resultado, no paradigam Modelo-Visão-Controlador, imagine as Visões do Backbone como ambos visão e controlador.
Isso implica seriamente ao desenvolver aplicações com interações significarivas de usuários. Na verdade, há várias situações onde pode-se querer usar outra biblioteca para manipular o DOM. Visualização de dados e jogos de navegador são dois exemplos onde se pode preferir ter outra biblioteca para manipular parte da renderização da visão dos usuários. Assim, pode-se escolher jQuery, d3.js, crossfilter ou three.js para algumas das manipulações do DOM.
Felizmente, há formas de fazer o Backbone trabalhar bem com esses outros manipuladores de DOM.
Manipulando o Modelo de Objeto do Documento no Backbone
Antes de continuarmos, revisemos a manipulação do DOM com Backbone. Comecemos com um objeto de visão básico.
var SomeView = Backbone.View.extend({ // Some definition stuff here }); var aView = new SomeView();
Ótimo. Agora, digamos à visão para renderizar-se, definindo o método .render()
.
var SomeView = Backbone.View.extend({ // define how to render something render: function() { // get some HTML var htmlContent = "<p>This some HTML that will be inserted into the DOM</p>"; // insert the html this.$el.html(htmlContent); // return an instance of the object for chaining return this; } });
Temos várias coisas acontecendo aqui. Vejamos passo-a-passo.
Definindo um Método .render()
.
Primeiro, definimos um método .render()
que encapsula a lógica necessária para renderizar o HTML. Note que o Backbone vem com um método .render()
por padrão. Contudo, não significa muita coisa. Ele foi projetado para ser sobrescrito!
Obtendo Conteúdo HTML
O exemplo acima assume que obtemos o HTML de algum lugar. Podemos usar underscores _.template()
. Anternativamente, podemos usar outras bibliotecas de modelagem, como a Handlebars (minha favorita). O que importa é que, de alguma forma, obtenhamos o conteúdo HTML.
O Que Seria Esse el
?
Precisamos de um lugar para guardar o HTML. E é para isso que o el
serve. Como o .render()
, el
é um atributo que vem por padrão com as Visões do Backbone. Ele referencia o elemento HTML (e todos seus filhos) presente na visão. No exemplo acima, não o especificamos. Por padrão, el
é uma div
. Contudo, poderíamos ter um elemento pai assim:
var SomeView = Backbone.View.extend({ el: "article", ... }); var aView = new SomeView(); console.log(aView.el); // an empty "article" HTML element
Também existe o $el
, que apenas é o el
envolvido pelo jQuery Depois veremos que $el
tem um papel importante ao dominar as Visões do Backbone.
Retornando this
...
Finalmente, retornarmos a referência do objeto em si, permitindo encadeamento. Embora não necessário, retornar this
é convenção. Sem return this
, precisaríamos acessar o conteúdo do HTML de alguma forma. O código abaixo ilustra uma solução alternativa.
/** * If render() returns nothing, we are really * accessing the `el` property of undefined, which does not * exist! */ aView.render().el; // Should throw an error // Try accessing the HTML console.log(aView.el); // Should be empty (but defined!) // add HTML to the DOM of 'aView' aView.render(); // Try accessing the HTML again console.log(aView.el) // Should contain the HTML
Ihh, Nada Aparece na Tela!
Bom ponto. Embora tenhamos chamado .render()
, ainda não vemos algo na tela—que coisa?!
Isso se dá por não termos interagiado com o DOM ainda. Tudo que fizemos foi gerar HTML e representá-lo em um objeto JavaScript chamado aView
. Como não temos acesso ao HTML gerado, o que precisamos fazer é inserir o HTML no DOM do nosso aplicativo web.
Para continuar, criaremos um pequenos app que fará a visão aparecer assim que a página carregar. Abaixo temos o HTML e o JavaScript necessários:
Preparação do HTML
<html> <head> <meta charset="utf-8"> <title>My Awesome Backbone App</title> <!-- Include your CSS Here --> <link rel="stylesheet" type="text/css" href="/css/styles.css" /> <!-- Include JS dependencies --> <!-- Backbone depends on underscore and, in this example, depends on jQuery. Please note the order of the dependencies --> <script src="/js/lib/jquery.js"></script> <script src="/js/lib/underscore.js"></script> <script src="/js/lib/backbone.js"></script> </head> <body> <div class="app"></div> <!-- Include your custom Backbone code in the below script --> <script src="/js/app.js"></script> </body> </html>
Eis O Que Temos no App.js
// Create a view var SomeView = Backbone.View.extend({ initialize: function() {}, render: function() { var someHTML = "<p>This is some HTML</p>"; this.$el.html(someHTML); return this; } }); // Create a router var Router = Backbone.Router.extend({ // define your routes routes: { "": "home" }, home: function() { var aView = new SomeView(); $('.app').html(aView.render().el); } }); // Instantiate your router new Router(); // Start tracking history Backbone.history.start();
Abramos um servidor local/navegador, carreguemos a página e a aplicação deverá rodar!
Usando Backbone e jQuery Simultaneamente
A flexibilidade do Backbone permite-nos usar bibliotecas de terceiro para manipular o DOM. Um cenário é quando queremos usar jQuery e Backbone simultaneamente para manipular as visões. Abaixo temos o exemplo atualizado:
var SomeView = Backbone.View.extend({ // Manipulate DOM indirectly by creating HTML content in a // Backbone View render: function() { var someHTML = "<p>Some HTML</p><p class='empty'><p>"; this.$el.html(someHTML); return this; }, // Manipulate DOM directly from within the Backbone View renderWithJQuery: function() { var otherHTML = "<p>Other HTML</p>"; $('.app').append(otherHTML); // may not make sense to return 'this' }, // another render method, to keep things interesting specialRender: function() { this.$('.empty').append("<span>No longer empty!</span>"); return this; } }); // Later in your app... // create the view var aView = new SomeView(); // change the DOM to reflect the newly created view $('.app').html(aView.render().el); // append more content directly to the DOM using jQuery within // a Backbone view object aView.renderWithJQuery();
O código resultará em dois parágrafos na página. O primeiro parágrafo conteém "Some HTML". O segundo contém "Other HTML".
Para testar o conhecimento, invertamos as chamadas, assim:
// SomeView is already defined var aView = new SomeView(); aView.renderWithJQuery(); $('.app').html(aView.render().el);
O cüodigo acima resultará em um parágrafo: "Algum HTML". Em ambos os casos, há um elemento <p>
com nada nele. Discutiremos isso em já-já.
Manipulando o DOM Eficientemente com Visões do Backbone
Entender a mágica da manipulação (travessia) eficiente do DOM requer entendimento de this.$el
e this.$()
. Ao usar this.$el
, avaliamos a manipulação do DOM do conteúdo dentro da visão. Já com this.$()
, avaliamos a travessia do DOM à arvore DOM dentro da visão.
Assim, no Backbone, usar $()
(ao invés de this.$()
) podem ser ineficiente. Por exemplo, digamos que queremos atravessar o DOM para encontrar um elemento. Podemoss usar quaisquer dos métodos de travessia do DOM, incluindo .find()
, .children()
, .closest()
, .first()
, e por aí vai.
Se soubermos, a priori, que o elemento procurado está no DOM da visão, devemos usar this.$()
, evitando uma busca desnecessária num DOM maior. Se o elemento estiver fora do DOM da visão, temos de usar $()
.
Por exemplo, o método .specialRender()
usa travessia localizada do DOM para garantir que buscamos elementos com a classe empty
no contexto da visão. Se encontrada, faz o HTML desses elementos incluir um span
e o texto "No longer empty".
Conclusão
Nese artigo, revisamos as Visões do Backbone, discutimos como renderizá-las no DOM e exploramos como fazer o Backbone trabalhar junto de outras biblotecas que queiramos usar para manipular o DOM. Também aprendermos sobre travessia localizada do DOM e identificamos métodos eficiente e ineficientes para atravessá-lo.
Na próxima parte, aprofundaremo-nos em exemplos mais complicados emcomo fazer múltiplas bibliotecas trabalharem juntas para manipular o DOM.
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post