Backbone.js - A espinha dorsal de aplicações web

Backbone.jsA espinha dorsal de aplicações web Henrique Gogó @henriquegogo

jQuery para tudo? É um framework para trabalhar com DOM.Infelizmente, quando começamos a ter pilhas e pilhas de arquivos JS, lidar com o seletores ecallbacks podem deixar seu código bagunçado.

Como (provavelmente) você faz hoje $("input[name=age]").on("change", function() { if ($(this).val() > 15) { console.log("Velhote"); } }); $("form").submit(function() { $.post("/users", $("form").serialize()); return false; })

Mas com Backbone.js... Você pode representar seus dados comomodelos, que podem ser criados, validados, destruídos, e salvos no servidor

Modelvar User = Backbone.Model.extend({ urlRoot: "/users", defaults: { name: "Unknown user", }, validate: function(attrs) { if (attrs.age > 15) { console.log("Velhote"); } }});var henrique = new User({ id: 1, name: "Henrique" });henrique.set("age", 27);

Collectionsvar Users = Backbone.Collection.extend({ model: User});var employees = new Users([{ name: "Letícia" },{ name: "Mateus" }]);employees.on("add", function(user) { console.log("Welcome " + user.get("name") + "!");});employees.add({ name: "Roberto" });

Mais sobre collectionsUsers.each(function(user) { user.facaAlgo();});var nomes = Users.map(function(user) { return user.get("name");});var ordenado = Users.sortBy(function(user) { return user.get("name").toLowerCase();});

E não é só isso!

Você não tem que escrever o código que olhapara o DOM para encontrar um elemento com um id específico, e atualizar o HTML manualmente.Basta alterar o Model e sua View simplesmente irá atualizar.

Views + Backbone.ModelBindervar View = Backbone.View.extend({ el: "body", initialize: function() { this.modelBinder = new Backbone.ModelBinder(); this.modelBinder.bind(this.model, this.el); }, render: function() { console.log(this); }});

E NÃO ÉSÓ ISSO!!!

Rotas client-sideSincronização automática com o servidorTemplates (underscore.js)Compatibilidade com jQuery (ou outros)

E quem usa? LinkedIn Mobile Foursquare Wunderkit Disqus Walmart Mobile Groupon Now! Basecamp Mobile Airbnb MobileSoundCloud Mobile Trello

http://backbonejs.org

http://www.gogs.com.br

http://www.milfont.org	682
http://gogs.com.br	17
http://feeds.feedburner.com	5
http://localhost	2
http://www.infoblogs.com.br	1

Backbone.js - A espinha dorsal de aplicações web

by Henrique Gogó on Jun 24, 2012

Accessibility

Upload Details

Usage Rights

5 Embeds 707

Statistics

Backbone.js - A espinha dorsal de aplicações web Presentation Transcript