Aplicacoes dinamicas Rails com Backbone

Aplicações
dinâmicas em
Rails

Rafael Felix

@rs_felix

http://blog.rollingwithcode.com

http://www.crafters.com.br

Backbone é uma estrutura para
aplicações que fazem uso pesado de JavaScript, e
conecta-se a sua aplicação por uma interface
RESTful.

var MyModel = Backbone.Model.extend({})

save([attributes],[options])


POST PUT





fetch([options])



fetch([options]) setInterval(function(){
model.fetch();
}, 10000);



fetch([options]) validate(attributes)

Backbone.Model

Backbone.Collection

var Library = Backbone.Collection.extend({
model: Book
});

add(models, [options])

model: Book
});

add(models, [options]) url()

model: Book
});

url: '/library'

model: Book
});


model: Book
});

fetch([options])


model: Book
});

fetch([options]) Library.fetch()

GET '/library'


model: Book
});

fetch([options]) create(attributes, [options])

var alibrary = new Library;
var book = alibrary.create({
title: "A book",
author: "Someone"
})

Backbone.Model

Backbone.Collection

Backbone.Router

var Workspace = Backbone.Router.extend({

routes: {
"help": "help",
"search/:query": "search",
"search/:query/p:page": "search"
},

help: function() {},

search: function(query, page) {}

});


routes: {
"help": "help", #help
"search/:query": "search", #search/felix
"search/:query/p:page": "search" #search/felix/p2
},



});


routes: {
"help": "help", #help
"search/:query": "search", #search/felix
"search/:query/p:page": "search" #search/felix/p2
},

felix 2

});

Backbone.Model

Backbone.Collection

Backbone.View Backbone.Router

var DocumentRow = Backbone.View.extend({

tagName: "li",

className: "document-row",

events: {
"click .icon": "open",
"click .button.edit": "openEditDialog",
"click .button.delete": "destroy"
},

render: function() {
...
}

});


tagName: "li",
<li class="document-row"></li>

events: {
"click .icon": "open",
},

...
}

});


tagName: "li",


events: {
"click .icon": "open", $(".icon").click(open)
},

...
}

});

layout
application
ProductView

layout
application
ProductView

CartView

app/views/layouts/application.html.erb

...
<div class="container">
<div class="content" id="application">
</div>

<footer>
<p></p>
</footer>

</div>
...

var obj = "bla bla bla";
someDiv = document.getElementById("someDiv");
someDiv.innerHTML = "<span>" + obj + "</span>";

template.jst

<span> ${obj} </span>

template.jst.ejs

<span> <%= obj %> </span>

app/assets/javascripts/templates/app.jst.ejs

<div id="products" class="span10">
</div>
<div id="cart" class="span6">
</div>

app/assets/javascripts/views/app_view.js

window.AppView = Backbone.View.extend({
template: JST["templates/app"],
className: "row",

initialize: function(){
},

render: function(){
$(this.el).html(this.template());
return this;
}
});

app/assets/javascripts/home.js

$(function(){
view = new AppView().render().el;
$(view).appendTo("#application");
});

app/assets/javascripts/home.js

$(function(){
view = new AppView().render().el;
$(view).appendTo("#application");
});

<div class="row">
<div id="products" class="span12">
</div>
<div id="cart" class="span6">
</div>
</div>

app/assets/javascripts/templates/product.jst.ejs

<div class="product-image">
<img class="thumbnail" src="http://placehold.it/90x90" alt="">
</div>
<div class="details">
<span class="name"><%= model.get("name") %></span><br />
<span class="price">R$ <%= model.get("price") %></span>
<form class="add_product">
<input type="hidden" name="id" value="<%= model.get("id") %>">
<input type="submit" name="commit" value="Comprar" class="btn info">
</form>
</div>

app/assets/javascripts/views/product_view.js

window.ProductView = Backbone.View.extend({
template: JST["templates/product"],
className: "product-detail",

},

render: function(){
$(this.el).html(this.template({model: this.model}));
return this;
}
});

rails g model product name:string price:decimal

rails g controller products
config/initializers/backbone.rb

ActiveRecord::Base.include_root_in_json = false




[
{"product": { "name" : "" }},
{"product": { "name": "" }},
]




[
{"name" : "" },
{"name": "" },
]

app/controllers/products_controller.rb

class ProductsController < ApplicationController
respond_to :json
def index
@products = Product.all
respond_with @products
end
end

app/assets/javascripts/models/product.js

window.Product = Backbone.Model.extend({

});

window.ProductsCollection = Backbone.Collections.extend({
model: Product,
url: '/products'
});



_.bindAll(this, 'addOne', 'addAll');

this.collection = new ProductsCollection;
this.collection.bind('add', this.addOne);
this.collection.bind('all', this.addAll);

this.collection.fetch();
},

addAll: function(){
$("#products").html("");
this.collection.each(this.addOne);
},

addOne: function(product){
view = new ProductView({model: product}).render().el;
$(view).appendTo("#products");
}
});

app/assets/javascripts/templates/cart.jst.ejs

<div id="cart-products">
</div>
<hr/>
Total: <%= model.get("quantity") %> R$ <%= model.get("total") %>

app/assets/javascripts/views/cart_view.js

window.CartView = Backbone.View.extend({
template: JST["templates/cart"],
className: "cart-detail",

_.bindAll(this, 'render');
this.model.bind('change', this.render);
this.model.fetch();
},

render: function(){
$(this.el).html(this.template({model: this.model}));
return this;
}
});

app/assets/javascripts/models/cart.js

window.Cart = Backbone.Model.extend({
url: function(){
return '/cart';
}
});

rails g model cart quantity:integer total:decimal

rails g controller cart

app/controllers/cart_controller.rb

class CartController < ApplicationController
respond_to :json

def show
@cart ||= Cart.first || Cart.create!
respond_with @cart
end
end


get 'cart' => "cart#show"
respond_to :json

def show
@cart ||= Cart.first || Cart.create!
respond_with @cart
end
end


...
...

this.cart = new Cart;
this.cartView = new CartView({model: this.cart}).
render().el;
},
render: function(){
$(this.el).html(this.template());
this.$("#cart").html(this.cartView);
return this;
},
...
});

rails g model cart_product cart:references product:references

rails g model cart_product cart:references product:references

app/models/cart.rb

class Cart < ActiveRecord::Base
has_many :cart_products
has_many :products, through: :cart_products

def add_product(product)
self.update_attributes
quantity: self.quantity + 1, total: total + product.price
self.cart_products << CartProduct.new(cart: self, product: product)
end
end

app/assets/javascripts/models/cart_product.js

window.CartProduct = Backbone.Model.extend({
url: function(){
return "/cart/product/"+this.productId+"/add";
},
initialize: function(args){
this.productId = args.productId;
}
});

app/assets/javascripts/models/cart_product.js

window.CartProduct = Backbone.Model.extend({
url: function(){
return "/cart/product/"+this.productId+"/add";
},
this.productId = args.productId;
}
});

post 'cart/product/:id/add' => "cart#add_product"


respond_to :json

def show
...
end

def add_product
@product = Product.find params[:id]
@cart = Cart.first
@cart.add_product @product
respond_with @cart
end
end


...

events: {
"submit form" : "addProductToCart"
},

...
this.cart = args.cart
},

...

});


...

events: {
"submit form" : "addProductToCart"
},

...
this.cart = args.cart
},

...

});
addOne: function(product){
view = new ProductView({model: product, cart: this.cart}).render().el;
$(view).appendTo("#products");
}


...

addProductToCart: function(e){
e.preventDefault();
productId = this.$("form.add_product > input[name=id]").val();
item = new CartProduct({productId: productId});
view = this;
item.save({}, {
success: function(){
view.cart.fetch();
}
});
}
});

http://backbone-todos.heroku.com/

Obrigado
felix.rafael@gmail.com
http://twitter.com/rs_felix
http://github.com/fellix

Links
http://documentcloud.github.com/backbone/
https://github.com/creationix/haml-js
https://github.com/codebrew/backbone-rails
http://seesparkbox.com/foundry/better_rails_apis_with_rabl

Aplicacoes dinamicas Rails com Backbone

More Related Content

What's hot (20)

Similar to Aplicacoes dinamicas Rails com Backbone (20)

Recently uploaded (20)

Aplicacoes dinamicas Rails com Backbone