Rafael Felix Nohup - Tech Talk Backbone.JS 

WTF Backbone? 

• MV* WTF Backbone? 

• MV* • Separação Lógica entre camadas WTF Backbone? 

• MV* • Separação Lógica entre camadas • Evita código macarronico WTF Backbone? 

How it works? Model Collection View Server 

Backbone.Model var Product = Backbone.Model.extend({ urlRoot: '/products' }); 

Backbone.Model var Product = Backbone.Model.extend({ urlRoot: '/products' }); GET /products/:id PUT /products POST /products/:id DELETE /products/:id 

Backbone.Model var Product = Backbone.Model.extend({ urlRoot: '/products' }); GET /products/:id PUT /products POST /products/:id DELETE /products/:id fetch save save destroy 

Backbone.Collection var Products = Backbone.Collection.extend({ model: Product, url: '/products' }); 

Backbone.Collection var Products = Backbone.Collection.extend({ model: Product, url: '/products' }); GET /products 

Backbone.Collection var Products = Backbone.Collection.extend({ model: Product, url: '/products' }); GET /products fetch 

Backbone.View var ProductItemView = Backbone.View.extend({ tagName: 'li', className: 'product', initialize: function () { this.model.on('change', this.render, this); }, render: function () { this.$el.html(this.model.get('name')); return this; } }); 

Collection View var ProductsView = Backbone.View.extend({ tagName: 'ul', className: 'products', initialize: function () { this.collection.on('add', this.addOne, this); this.collection.on('reset', this.addAll, this); }, render: function () { return this; }, addAll: function () { this.$el.html(''); this.collection.forEach(this.addOne, this); }, addOne: function (product) { var view = new ProductItemView({ model: product }); this.$el.append(view.render().el); } }); 

Backbone.Router var App = new (Backbone.Router.extend({ routes: { 'products' : 'products' }, products: function () { var collection = new Products, view = new ProductsView({collection: collection}); $('#container').html(view.render().el); collection.fetch(); }, start: function () { Backbone.history.start({pushState: true}); } })); 

Backbone.Router var App = new (Backbone.Router.extend({ routes: { 'products' : 'products' }, products: function () { var collection = new Products, view = new ProductsView({collection: collection}); $('#container').html(view.render().el); collection.fetch(); }, start: function () { Backbone.history.start({pushState: true}); } })); Com pushState ativado: ‘/products’ Sem pushState: ‘#products’ 

Backbone.Router var App = new (Backbone.Router.extend({ routes: { 'products' : 'products' }, products: function () { var collection = new Products, view = new ProductsView({collection: collection}); $('#container').html(view.render().el); collection.fetch(); }, start: function () { Backbone.history.start({pushState: true}); } })); $(function () { App.start(); }); 

Views Handling Events var ProductsView = Backbone.View.extend({ ... events: { 'click li' : 'open' } ... open: function (event) { //Código para abrir o registro } }); 

E SE... 

$(function () { $.getJSON('/products.json', function (data) { var list = $('

').attr('class', 'products'); $.each(data, function (product) { var item = $('

'). attr('class', 'product'). val(product.name); list.append(item); }); $('#container').html(list); }); $('#container').on('click', 'ul.products li', function () { //Lógica de renderizar a página do produto }); }); 

Obrigado @rs_felix http://fellix.github.com