Backbone.js Rafael Felix 

Rafael Felix @rs_felix http://fellix.github.com http://github.com/fellix http://www.hite.com.br 

No content

No content

Model Collection View Server 

Backbone.Model var Product = Backbone.Model.extend({ urlRoot: ‘/products’ }) 

Backbone.Model var Product = Backbone.Model.extend({ urlRoot: ‘/products’ }) class Product < ActiveRecord::Base 

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.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; } }) 

No content

$(“#id”).append($(“

”).html(“teste”)) 

$(“#id”).append( $(“”).append( $(“”).append( $(“”).append( $(“”).html(“Header 1”) ).append( $(“”).html(“Header 2”) ) ) ).append($(“”).append( $(“”).append( $(“”).append(“Conteúdo 1”) ).append( $(“”).append(“Conteúdo 2”) ) ) ) 

No content

app/assets/javascripts/templates/product.jst ... .... app/assets/javascripts/application.js JST[“templates/product”]() 

Demonstração 

class Product < ActiveRecord::Base validates :name, :description, :contact_email, presence: true scope :ordered, ->{ order("products.created_at asc") } end 

class ProductsController < ApplicationController respond_to :json ... end 

No content

window.Product = Backbone.Model.extend({ urlRoot: "/products" }); window.Products = Backbone.Collection.extend({ model: Product, url: "/products" }); 

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; } }); 

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() }) 

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; } 

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(); } 

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(); } }); 

<%= name %> 

window.ProductForm = Backbone.View.extend({ ... events: { "click #commit": "commit" }, show: function () { this.$el.html(this.template()); this.$el.modal('show'); return this; }, ... }); 

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("" + errors.join("\n") + ""); }); } 

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; } }); 

@rs_felix Obrigado! https://github.com/fellix/rsonrails-backbone