Implementar e disparar eventos em Backbone.js

Como implementar eventos com o módulo Backbone.Event de Backbone.js, atribuir manipuladores de eventos personalizados com on() e executá-los com trigger().

Por Miguel Angel Alvarez - Tradução de Celeste Veiga


Publicado em: 19/12/13
Valorize este artigo:

Vamos dedicar este capítulo do Manual de Backbone.js à implementação de eventos no framework. Neste momento já devemos ter funcionando Backbone.js na nossa página web e, graças aos conhecimentos do artigo dedicado a Instalar backbone.js na página, pudemos colocar em funcionamento nosso primeiro script.

Se você leu a documentação publicada sobre BackboneJS até este ponto em CriarWeb.com, terá entendido a parte teórica dos eventos e porque são tão fundamentais e úteis. Como você sabe, a "magia" de BackboneJS começa com os eventos, por isso não é má ideia começar também por este assunto, adentrando-se no código fonte. Em resumo, os eventos servem para manter comunicados a todos os atores na nossa aplicação, tanto modelos, coleções, vistas... já que podemos defini-los sobre qualquer objeto e também escutá-los a partir de qualquer objeto, para realizar ações quando se produzam.

Backbone.Events

Este é o módulo usado para trabalhar com eventos no framework, Backbone.Events e pode implementar-se sobre qualquer objeto, não necessariamente objetos de Backbone, mas sim qualquer objeto Javascript em geral. Graças a sua funcionalidade teremos a possibilidade, entre outras coisas, de criar eventos personalizados, atribuindo funções manipuladoras e de desatar (invocar, disparar) esses eventos personalizados. Para definir um evento sobre um objeto temos primeiro que estender esse objeto com a classe Backbone.Events, para que em seguida possamos atribuir a ele esses eventos personalizados.

//crio um objeto qualquer com Javascript, usando notação JSON
var objeto = {};
//estendo esse objeto com a classe Backbone.Events
_.extend(objeto, Backbone.Events);

Nota: se você observar, para estender um objeto usamos o método _.extend(), que pertencente à biblioteca Underscore.js.

A partir desse momento, sobre nosso objeto Javascript poderemos invocar os métodos de Backbone.Events.

Atribuir manipuladores de eventos com on()

Usamos o método on() para atribuir uma função manipuladora de eventos sobre um objeto, para um evento qualquer. Este método recebe pelo menos dois valores, sendo o primeiro o nome do evento que queremos criar e o segundo a função manipuladora que associa, que será invocada quando se produza esse evento.

objeto.on("meu_primeiro_evento", function(msg) {
alert("Foi desencadeado  " + msg);
});

Neste caso "meu_primeiro_evento" é o nome do evento que estamos criando. A função anônima enviada como segundo parâmetro é o manipulador de evento que estamos criando, também chamada função "callback".

Nota: Em projetos que tenham um número muito elevado de eventos nos recomendam, na documentação de BackboneJS, usar, por convenção, o caractere dois pontos ":" para criar um espaço de nomes, por exemplo "pesquisa:começar", "combocidades:abrindo".

Podemos atribuir uma mesma função manipuladora de eventos a vários eventos personalizados ao mesmo tempo, apenas separando estes nomes de eventos com um espaço em branco.

objeto.on("mudar:hora mudar:data", …);

Disparar eventos com trigger()

Uma vez que tenhamos associado uma função manipuladora com um objeto a ser executado como resposta a um evento personalizado, podemos "disparar" esses eventos com o método trigger(). O modo é muito simples, simplesmente lhe indicamos o nome do evento que queremos que se produza e os parâmetros que o manipulador de eventos deve.

objeto.trigger("mi_primer_evento", "evento que acabamos de criar.");

Com o código anterior produzimos o evento personalizado "meu_primeiro_evento" que acabamos de criar. Ademais indicamos a trigger() um segundo parâmetro que é recebido pela função callback associada a esse evento.

Na realidade, trigger() sé requer um parâmetro, que é o nome do evento que queremos disparar, o resto de parâmetros que lhe passemos serão enviados à função manipuladora de eventos que se esteja executando.

//passando varios dados à função manipuladora
objeto.on("varios_dados", function(dado1, dado2){
alert("se produziu o evento 'varios_dados' e recebi " + dado1 + " y " + dado2);
});
objeto.trigger("varios_dados", "valor1", "valor2");

Variável "this" como contexto dentro das funções manipuladoras de eventos

É importante destacar o papel da variável "this" dentro das funções manipuladoras de eventos, que nos dá uma referencia ao contexto onde este código está sendo executado ; dito de outro modo, o objeto sobre o que foi produzido o evento. Isto não deveria gerar muitas dúvidas, no entanto, vejamos código seguinte.

//crio um objeto novo, no que carrego alguns dados
var pessoa = {
nome: "Miguel"
};
//estendo o objeto para que suporte eventos de backbone.js
_.extend(pessoa, Backbone.Events);
//atribuo uma função manipuladora a um novo evento
pessoa.on("segundo_evento", function(){
alert("Manipulador de 'segundo_evento'...");
alert("mostro this.nome: " + this.nome)
});
//disparo esse novo evento
pessoa.trigger("segundo_evento");

Como resultado de executar esse código, você comprovará que é mostrado o nome da pessoa "Miguel", que foi obtido através de this.nome. Ou seja, "this", é uma referencia ao objeto que recebeu o evento que acaba de se produzir.

O módulo de eventos contém outras funções interessantes que veremos um pouco depois, como off() ou one(). Convocamos você para próximos módulos nos que seguiremos conhecendo as possibilidades dos eventos neste framework.






Usuários :    login / registro

Categorias relacionadas
O autor

Home | Sobre nós | Copyright | Anuncie | Entrar em contato