Backbone.js - Uma apresentação dos principais conceitos.

1. Backbone.js
João Helis
Smith Ascari
http://backbonejs.org

2. Agenda
1. Backbone.js
2. Model
3. View
4. Collection
5. Router
6. Cinephilebox

3. Backbone.js
➢ framework em javascript para estruturar
aplicações web.
➢ Client-side
➢ open source
➢ abordagem MVC

4. Backbone.js
➢ dependências
○ Underscore.js
○ jQuery

5. Model
➢ O coração de qualquer aplicação javaScript
➢ Contém os dados da aplicação e grande
parte da sua lógica

6. Model
➢ Criar um Model
➢ window.User = Backbone.Model.extend({});

7. Model
➢ Criando uma instancia do Model
➢var user = new User()
var user = new User({ name:"João Helis",
email:"joaohelis.bernardo@dce.ufpb.br" })

8. Model
➢ Definindo construtores
window.User = Backbone.Model.extend({
initialize: function () {
console.log("This model has been initialized");
}
}

9. Model
➢ Valores default
➢
window.User = Backbone.Model.extend({
defaults: {
name: "Seu Zé",
email: "ze@dce.ufpb.br"
}
});

10. Model
Os Models tem um conjunto de métodos prédefinidos pelo
Backbone.js
– extend – constructor / initialize – get
– set – escape – has
– unset – clear – id
– changed – defaults – toJSON
(....)
Todos os métodos de Backbone.Model (http://backbonejs.org/#Model)

11. Model
➢ Métodos Get e Set
➢user.set({name: "Smith"});
user.get("name");

12. View
➢ Organiza a interface
➢ Não possui código HTML
➢ Apoiada por Model’s (define como apresentá-los)

13. View
Criar uma View
var UserView = Backbone.View.extend({});

14. View
Criar view
var UserView = Backbone.View.extend({
initialize: function () {
this.render();
},
render: function () {
$(this.el).html(this.template(this.model.toJSON()));
return this;
}
});

15. View
➢ extend
○ para criação de views personalizadas
○ herda propiedades e funções
○ events, render, className, tagName

16. View
➢ el
○ é um elemento do DOM
○ o conteúdo da view é inserido nele
render: function () {
$(this.el).html(this.template(this.model.toJSON()));
},

17. View
➢ constructor/initialize
○ permite definir propriedades
○ executado quando a view é criada
➢ render
○ código para renderizar/atualizar o template

18. View
➢ events
○ define eventos que serão monitorados
○ segue o formato { “event selector” : “callback” }
// escopo da View
events:{
"click .tab": "tabPaneToggleClass"
},
tabPaneToggleClass: function(event){
if(!$(".btn", event.currentTarget).hasClass("btn-primary"))
$('.btn-tab').toggleClass('btn-primary');
}

19. Collection
➢ Collection são conjuntos de Modelos
➢var userList = Backbone.Collection.extend({
model: User
});

20. Collection
➢ Os métodos add e remove
➢
var user = new User({name : "João Helis"});
var userList = new UserList();
taskList.add(user)

21. Collection
➢ Escutando eventos na Collection
➢
userList.on("add", function(user) {
console.log("User: " + user.get("name") + " added");
});
userList.on("remove", function(user) {
console.log("User: " + user.get("name") + " removed");
});

22. Collection
➢ Carregando modelos a partir do servidor
➢
var userList = Backbone.Collection.extend({
url: '/user' ←
model: User
});
userList.fetch() ←

23. Router
➢ conecta ações/URLs a eventos
var AppRouter = Backbone.Router.extend({
routes: {
"" : "home",
"movies/list" : "movieList",
"contact" : "contact",
},
home: function(){
this.configLanding();
$('#carouselBlk').html(new HomeView().el);
},
});

24. Router
➢ inicialização
○ instancia o Router
○ inicia o monitoramento de mudanças nas URLs
var app = new AppRouter();
Backbone.history.start();

25. Referência
Documentação do Backbone.js: http://backbonejs.org
Slides do Professor Yuri Malheiros

26. Backbone.js
Dúvidas?