RS on Rails - Backbone.js

My talk at the RS on Rails conference in Porto Alegre - Brazil about Backbone.js

1. Backbone.js Rafael Felix
2. Rafael Felix @rs_felix http://fellix.github.com http://github.com/fellix http://www.hite.com.br
5. Model Collection View Server
6. Backbone.Model var Product = Backbone.Model.extend({ urlRoot: ‘/products’ })
7. Backbone.Model var Product = Backbone.Model.extend({ urlRoot: ‘/products’ }) class Product < ActiveRecord::Base
8. Backbone.Model var Product = Backbone.Model.extend({ urlRoot: ‘/products’ })
9. Backbone.Model var Product = Backbone.Model.extend({ urlRoot: ‘/products’ }) GET /products/:id PUT /products POST /products/:id DELETE /products/:id
10. Backbone.Model var Product = Backbone.Model.extend({ urlRoot: ‘/products’ }) GET /products/:id PUT /products POST /products/:id DELETE /products/:id fetch save save destroy
11. Backbone.Collection var Products = Backbone.Collection.extend({ model: Product, url: ‘/products’ })
12. 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. $(“#id”).append($(“<p></p>”).html(“teste”))
15. $(“#id”).append( $(“<table></table>”).append( $(“<thead></thead>”).append( $(“<tr></tr>”).append( $(“<th></th>”).html(“Header 1”) ).append( $(“<th></th>”).html(“Header 2”) ) ) ).append($(“<tbody></tbody>”).append( $(“<tr></tr>”).append( $(“<td></td>”).append(“Conteúdo 1”) ).append( $(“<td></td>”).append(“Conteúdo 2”) ) ) )
17. app/assets/javascripts/templates/product.jst <table> <thead> ... </thead> <tbody> .... </tbody> </table> app/assets/javascripts/application.js JST[“templates/product”]()
18. Demonstração
19. class Product < ActiveRecord::Base validates :name, :description, :contact_email, presence: true scope :ordered, ->{ order("products.created_at asc") } end
20. class ProductsController < ApplicationController respond_to :json ... end
22. window.Product = Backbone.Model.extend({ urlRoot: "/products" }); window.Products = Backbone.Collection.extend({ model: Product, url: "/products" });
23. window.ProductApp = Backbone.View.extend({ el: $("#app"), initialize: function () { this.collection = new Products; }, render: function () { var list = new ProductList({ collection: this.collection }); this.$el.append(list.render().el); return this; } });
24. window.ProductApp = Backbone.View.extend({ el: $("#app"), initialize: function () { this.collection = new Products; }, render: function () { var list = new ProductList({ collection: this.collection }); this.$el.append(list.render().el); return this; } }); $(function () { new ProductApp().render() })
25. window.ProductList = Backbone.View.extend({ events: { "click #new-product": "newProduct" }, initialize: function () { this.collection.on("add", this.addItem, this); this.collection.fetch(); }, render: function () { this.$el.html('...'); return this; }
26. addItem: function (product) { var item = new ProductItem({ model: product }); this.$el.append(item.render().el); }, newProduct: function (evt) { evt.preventDefault(); var product = new Product; product.on("sync", function (model) { this.collection.add(model); }, this); var form = new ProductForm({ model: product }); form.show(); }
27. window.ProductItem = Backbone.View.extend({ className: "well span2", template: JST["templates/product_item"], events: { "click .more-info": "showDetails" }, initialize: function () { this.model.on("change", this.render, this); }, render: function () { this.$el.html(this.template(this.model.toJSON())); return this; }, showDetails: function () { var detail = new ProductDetail({ model: this.model }); detail.show(); } });
28. <a href='#' class='more-info'><%= name %></a>
29. window.ProductForm = Backbone.View.extend({ ... events: { "click #commit": "commit" }, show: function () { this.$el.html(this.template()); this.$el.modal('show'); return this; }, ... });
30. commit: function (evt) { evt.preventDefault(); var view = this; this.clearErrors(); this.model.save({ name: this.$el.find("#name").val(), description: this.$el.find("#description").val(), contact_email: this.$el.find("#contact_email").val() }, { success: function (model, response, options) { view.close(); }, error: function (model, xhr, options) { var feedback = JSON.parse(xhr.responseText); _.each(feedback.errors, function (errors, field) { var errorField = view.$el.find('#'+field); errorField.parents("div.control-group").addClass("error"); errorField.parents("div.controls"). append("<span class='help-inline'>" + errors.join("\n") + "</span>"); }); }
31. window.ProductDetail = Backbone.View.extend({ className: "modal fade", template: JST["templates/product_detail"], show: function () { this.$el.html(this.template(this.model.toJSON())); this.$el.modal('show'); return this; } });
32. @rs_felix Obrigado! https://github.com/fellix/rsonrails-backbone