Backbone Unindo Models e Views

Artigo, com exemplos, que mostra como unir um modelo (model) a uma visão (view) no framework Backbone para JavaScript

Este artigo é um exemplo de integração do Model (modelo) e da View (visão) do framework Backbone. Indicado para quem já conhece um mínimo do Backbone e/ou leu os artigos anteriores. O objetivo é demonstrar como funciona o evento change dos modelos e como ele pode interagir com a visão.

A primeira coisa que faremos é utilizar a função on() para delegar um função ao evento change do modelo.

Se você leu os artigos anteriores, o código abaixo deve ser familiar.

//
// Model
//
Person = Backbone.Model.extend({
    initialize: function () {
        console.log('model inicializado');
    }
});

//
// View
//
var ViewFormulario = Backbone.View.extend({

    initialize: function () {
        // instanciando um novo modelo
        this.model = new Person();

        // Escutando o evento `change`.
        // A cada alteração no modelo a função
        // de callback `render()` será executada
        this.model.on('change', this.render, this);
    },

    render: function () {
        console.log('renderizou!');
    }
});

//
// Instanciamos a View
//
var view = new ViewFormulario();

A cada alteração no modelo a função de callback render() será executada.

Confirmamos isso com o trecho de código abaixo.

view.model.set('name', 'flavio');
"renderizou!"
view.model.set('name', 'alexandre');
"renderizou!"
view.model.set('name', 'micheletti');
"renderizou!"

Um exemplo mais completo

Iremos construir um formulário com dois campos de textos: nome (name) e idade (age).

Um formulário web depende da tag <formulário>, mas neste exemplo ela não se fez necessário.

Veja nosso HTML:

<div id="app-container">
  <h2>Formulário</h2>
  <label>Nome: <input type="text" id="txtNome" /></label>
  <label>Idade: <input type="text" id="txtAge" /></label>
</div>  

No JavaScript, iremos construir um modelo denominado Person. Nossa visão trabalhará com o elemento HTML #app-container, inicializará os campos textos e o modelo. A função render() será encarregada de atualizar a visão.

Como dito, vamos utilizar o evento change do modelo, ele escuta as alterações em cada propriedade. Mas você também quer escutar a alteração em determinada propriedade, sem interferir nas demais. Para isso, você deve colocar o nome da propriedade na frete do evento, exemplo: change:age.

//
// Definindo um modelo (model)
//
var Person = Backbone.Model.extend({
  defaults: {
    name: '',
    age: 0
  }
});

//
// Definindo uma visão (view)
//
var AppView = Backbone.View.extend({
    // este é o elemento principal
    el: $('#app-container'),
    // executado ao instanciarmos a visão
    initialize: function () {

        // armazenado campos de textos
        this.$txtNome  = this.$el.find('#txtNome');
        this.$txtIdade = this.$el.find('#txtAge');

        // armazenando modelo
        this.model = new Person({});

        // Fazendo o modelo escutar o evento `change`, forma 1:
        //this.listenTo(this.model, 'change', this.render);

        // Fazendo o modelo escutar o evento `change`, forma 2:
        this.model.on('change', this.render, this);
    },
    // lógica de renderização
    render: function () {
        this.$txtNome.val(this.model.get('name'));
        this.$txtIdade.val(this.model.get('age'));
    }
});

//
// Iniciamos a aplicação
//
var view = new AppView();

Repare que para "ligar" o evento change do modelo podemos utilizar uma das seguintes funções: listenTo() ou on(), veja a documentação do Backbone para maiores detalhes.

É exatamente neste ponto que a "mágica" acontece. Dissemos ao programa que a cada alteração no modelo a visão (nosso famigerado formulário) deve ser atualizada.

Ressalto que o envento change escuta todas as propriedades do modelo, que dizer, a alteração em uma ou mais propriedade disparará o evento e, consequentemente, renderizará a visão.

Novamente, se alterarmos o modelo, o nossa visão será atualizada.

//
// Experimente alterar o modelo para ver
// o formulário sendo atualizado.
//
view.model.set({name: 'flavio', age: 20});
view.model.set({name: 'Alexandre', age: 30});
view.model.set({name: 'Micheletti', age: 40});

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

Navegue nesta série!

Comentários

comments powered by Disqus