Backbone Views e Eventos

Artigo que demonstra, de forma prática, como trabalhar com eventos e views no framework Backbone (JavaSCcript).

Este artigo mostra como atribuir funções aos eventos de uma visão (view) em Backbone (framework JavaScript). O artigo faz parte de uma série, veja menu a direita para visualizar a sêquencia de artigos.

Obviamente, suas visões terão elementos que visam sofrer algum tipo de evento do usuário. Com Backbone há 2 ou 3 formas para atribuírmos os eventos. Mas a primeira forma que você deve aprender é a que utiliza a propriedade events das Views.

Como acabei de dizer, os templates do Backbone possuem o método events() e "formato" deve seguir o esquema abaixo.

var ViewQualquer = Backbone.View.extend({
    el: {},
    initialize: function(){
    },
    //
    // Utilize a propriedade `events` para delegar eventos
    // aos elementos de sua view
    //
    events: {
        "tipo-de-envento"              : "função de callback",
        "tipo-de-envento id-elemento"  : "função de callback",
        etc...
    },
    render: function(){
    }
});
var search_view = new SearchView();

Exemplo

O formulário abaixo é o mesmo da matéria anterior, veja seu formato.

O trecho HTML equivalente é mostrado abaixo.

    ...
    <body>

        <!-- Template -->
        <script type="text/template" id="formulario-template">
          <label>Search</label>
          <input type="text" id="txtTermo" />
          <input type="button" id="btnBuscar" value="Buscar" />
        </script>

        <!-- Container onde o template será renderizado -->
        <div id="formulario-container"></div>
    ...

Nosso objetivo é atribuir um evento ao botão que, quando disparado, executará uma função que, por sua vez, deverá mostrar no console o conteúdo da caixa de texto, por tanto, fique com o console de JavaScript aberto para ver os resultados.

Temos um botão em nosso template, como atribuiremos um evento a ele ?

Acrescentamos o evento click ao botão #searchInput conforme o código abaixo.

var SearchView = Backbone.View.extend({
    el: $("#formulario-container"),  
    initialize: function(){
        this.render();
    },
    render: function(){
        this.template = _.template( $("#formulario-template").html(), {} );
        this.$el.html( this.template );
    },
    //
    // Delegando eventos
    //
    events: {
        // Evento click para o único botão do template
        // executamos o callback `doSearch` quando o evento é disparado
        "click input[type=button]": "doSearch"
    },
    //
    // Função de callback para o evento do botão
    //
    doSearch: function( event ){
        console.log( "Buscar por " + $("#txtTermo").val() );
    }  

});
var search_view = new SearchView();

Veja o resultado do código acima ilustrado pela imagem abaixo.

Navegue nesta série!

Comentários

comments powered by Disqus