backbone.js + rails - front-end e back-end conectados
Post on 22-May-2015
3.414 Views
Preview:
DESCRIPTION
TRANSCRIPT
Henrique Gogó@henriquegogo
Backbone.js + Ruby on Rails
Front-end e back-end conectados
“Henrique é um profissional comprometido e criativo, já o contratei algumas vezes para trabalhos importantes e obtive
um excelente serviço. Esse profissional eu recomendo e
garanto.” @cmilfont
“Esse cara sou eu...”
jQuery para tudo?
É um framework para trabalhar com DOM.
Infelizmente, quando começamos a ter pilhas e pilhas de arquivos JS, lidar com o seletores e
callbacks podem deixar seu código bagunçado.
Como (provavelmente) você faz hoje
$("input[name=age]").on("change", function() {if ($(this).val() >= 18) {
console.log("Maior de idade, hein!");}
});
$("form").submit(function() {$.post("/users", $("form").serialize());return false;
})
DOM Manipulation
vs
MVVM
jQuery
jQuery é uma biblioteca JavaScript rápida e concisa que simplifica manipulação de
documento HTML (...)
Backbone.js
Backbone.js dá estrutura para aplicações web, fornecendo modelos com chave-valor (...) e
conecta tudo para uma API existente através de uma interface RESTful JSON.
Modelvar User = Backbone.Model.extend({ urlRoot: "/users", defaults: { name: "Unknown user", }, validate: function(attrs) { if (attrs.age > 15) { console.log("Velhote"); } }});
var henrique = new User({ id: 1, name: "Henrique" });henrique.set("age", 27);
Collections
var Users = Backbone.Collection.extend({ model: User});
var employees = new Users([{ name: "Letícia" }, { name: "Mateus" }]);
employees.on("add", function(user) { console.log("Welcome " + user.get("name") + "!");});
employees.add({ name: "Roberto" });
Mais sobre collections
Users.each(function(user) { user.facaAlgo();});
var nomes = Users.map(function(user) { return user.get("name");});
var ordenado = Users.sortBy(function(user) { return user.get("name").toLowerCase();});
Views
var View = Backbone.View.extend({ el: "#form", render: function() { var template = _.template( ("#template").html(), this.model.toJSON() ); this.$el.html( template ); }});
Views com o plugin ModelBinder
var View = Backbone.View.extend({ el: "#form", initialize: function() { this.modelBinder = new Backbone.ModelBinder(); this.modelBinder.bind(this.model, this.el); }});
Um pouco mais sobre viewsvar View = Backbone.View.extend({ el: "#form", initialize: function() { this.modelBinder = new Backbone.ModelBinder(); this.modelBinder.bind(this.model, this.el); }, events: { 'blur input': 'save', 'blur textarea': 'save' }, save: function() { this.model.save(); }});
E no Rails? Não faço nada?
$ rails generate scaffold user name age:integer description:text
http://backbonejs.org
MVVM em outros sabores
http://www.gogs.com.br
top related