Backbone exemplo 07: Privilegiômetro

Primeiro exemplo real de código Backbone (JavaScript)

Este e o primeiro exemplo real de utilização do framework Backbone.

Veja a aplicação funcionado em devfuria.com.br/privilegiometro/ e aproveite para preencher o formulário.

O código fonte você encontra no github.

A idéia geral desta mini aplicação é anotar os passos (para frente ou para trás) do usuário e mostrar o resultado, a soma destes passos, no rodapé (tarja preta).

Ao final do formulário o usuário pode enviar os dados para o servidor e comparar o próprio resultado com o de outras pessoas.

O desafio foi atribuir uma única função genérica para todas as opções (options). A princípio eu tentei fazer isso utilizando os "events" da view (view.events) porém acabei utilizando mais JQuery do que eu desejava.

Eu separei os modelos na pasta models/ e as visões na pasta views/. Na pasta backend/ há um pequeno código escrito em PHP mas você pode ignorá-lo se quiser, com ele eu recebo a posição do usuário (resultado) e armazeno em banco para poder comparar com os resultados de outros participantes.

Abaixo mostro o conteúdo do arquivo privilegiometro/index.js contendo código JavaScript principal (central):

// privilegiometro/index.js

// Como a coleção é apenas a declaração contendo um única linha
// preferi deixá-la junto com o código principal.
var QuestoesCollection = Backbone.Collection.extend({});

//
// Collections
//
var questoes_collection = new QuestoesCollection(arrQuestoes);

//
// Models
//
var total_model = new TotalModel();
var comparativo_model = new ComparativoModel();

//
// Views
//
var questoes_view    = new QuestoesView({model: total_model});
var total_view       = new TotalView({model: total_model});
var comparativo_view = new ComparativoView({model: comparativo_model});

Navegue nesta série!

Comentários

comments powered by Disqus