Backbone.js

Nohup Tech Talk Backbone.js

Transcript

1. Rafael Felix Nohup - Tech Talk Backbone.JS
2. WTF Backbone?
3. • MV* WTF Backbone?
4. • MV* • Separação Lógica entre camadas WTF Backbone?
5. • MV* • Separação Lógica entre camadas • Evita código macarronico WTF Backbone?
6. How it works? Model Collection View Server
7. Backbone.Model var Product = Backbone.Model.extend({ urlRoot: '/products' });
8. Backbone.Model var Product = Backbone.Model.extend({ urlRoot: '/products' }); GET /products/:id PUT /products POST /products/:id DELETE /products/:id
9. Backbone.Model var Product = Backbone.Model.extend({ urlRoot: '/products' }); GET /products/:id PUT /products POST /products/:id DELETE /products/:id fetch save save destroy
10. Backbone.Collection var Products = Backbone.Collection.extend({ model: Product, url: '/products' });
11. Backbone.Collection var Products = Backbone.Collection.extend({ model: Product, url: '/products' }); GET /products
12. Backbone.Collection var Products = Backbone.Collection.extend({ model: Product, url: '/products' }); GET /products fetch
13. 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; } });
14. 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); } });
15. 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}); } }));
16. 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’
17. 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(); });
18. Views Handling Events var ProductsView = Backbone.View.extend({ ... events: { 'click li' : 'open' } ... open: function (event) { //Código para abrir o registro } });
19. E SE...
20. $(function () { $.getJSON('/products.json', function (data) { var list = $('<ul></ul>').attr('class', 'products'); $.each(data, function (product) { var item = $('<li></li>'). 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 }); });
21. Obrigado @rs_felix http://fellix.github.com