Backbone Models e Eventos

Este artigo demonstra como funcionam os eventos dos modelos do framework Backbone para JavaScript

Este artigo demonstra como funcionam os eventos dos models (modelos) do framework Backbone. Indicado para quem já conhece um mínimo do Backbone e/ou leu os artigos anteriores

Os modelos possuem eventos, irei comentar dois eventos: change e change:[atributte], consulte a documentação do Backbone para ver a lista completa e eventos.

O evento change escutará as alterações ocorridas em qualquer propriedade do modelo.

O evento change:[attribute] escutará as alteração em determinada propriedade, não interferindo nas demais.

Para fazer a ligação enre o evento e a função de callback podemos utilizar uma dessa duas funções: listenTo() ou on().

Eu vou utilizar a função on().

//
// Um modelo simples de exemplo
//
var Person = Backbone.Model.extend({

    // Valores padrão que são atribuídos ao instanciarmos o objeto
    defaults: {
        name: '',
        age: 0
    },

    // 
    initialize: function(){

        // Escutando as alterações na propriedade `name`
        this.on("change:name", function(model){
            console.log("Alterando name para: " + model.get('name'));
        });

        // Escutando as alterações na propriedade `age`
        this.on("change:age", function(model){
            console.log("Alterando age para: " + model.get('age'));
        });

    }
});

// Instanciando
//
// Repare que no construtor o evento NÂO é disparado.
var person = new Person({ name: "Micheletti", age: 20});

// Ao alterar o modelo...
person.set({ name: "Flavio"});
person.set({ name: "Alexandre", age: 40});

// ...percebemos (no console do navegador) os
// eventos sendo disparados:
//
// "Alterando name para: Flavio"
// "Alterando name para: Alexandre"
// "Alterando age para: 40"

Navegue nesta série!

Comentários

comments powered by Disqus