Um exemplo de visão (views) em Backbone

Um breve exemplo ilustrando como é uma View no framework Backbone (JavaScript)

Este exemplo de utilização das Views do Backbone é bastante simples e só utilizaremos a classe View.

O objetivo desta minúscula aplicação é inserir elementos de lista (li) conforme digitamos o conteúdo em um caixa de texto.

O exemplo é tão simples que dá para mostrar em um único arquivo HTML, veja o código.

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>

        <!-- Trecho HTML referente a visão (view) -->
        <div id="app-container">
          <h2>Lista</h2>

          <input type="text" id="txt-item" />
          <input type="button" id="btn-salvar" value="Salvar" />

          <ul id="lista-container"></ul>
        </div>

        <!-- bibliotecas -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
        <script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>

        <!-- seu código -->
        <script type="text/javascript">

        var AppView = Backbone.View.extend({
            el: $("#app-container"),

            initialize: function(){
                this.$lista   = $('#lista-container');
                this.$txtItem = $('#txt-item');
            },

            events: {
                "click #btn-salvar" : "salvar"
            },

            salvar: function() {
                var li = "<li>" + this.$txtItem.val() + "</li>";
                this.$lista.append(li);
            }
        });
        var app_view = new AppView();
        </script>

    </body>
</html>

Eu acho que o código dispensa explicações, mas em todo caso vamos lá...

Minha visão (view) ficará armazena na variável AppView pois ela representa a aplicação ("app"). O elemento principal da view é o a div "#app-container". O método initialize() está iniciando duas variáveis, uma referencia a tag lista (ul), a outra referencia a caixa de texto. Usamos a propriedade events para definir o evento do botão. Implementamos o método de callback salvar().

Veja a demo no jsfiddle.net/flaviomicheletti/mwkf7pog/.

Navegue nesta série!

Comentários

comments powered by Disqus