Backbone.js - Desenvolvimento de Sistemas Corporativos - UFPB - Campus IV

377 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Backbone.js - Desenvolvimento de Sistemas Corporativos - UFPB - Campus IV

  1. 1. Backbone.js João Helis Smith Ascari http://backbonejs.org
  2. 2. Agenda 1. Backbone.js 2. Model 3. View 4. Collection 5. Router 6. Cinephilebox
  3. 3. Backbone.js ➢ framework em javascript para estruturar aplicações web. ➢ Client-side ➢ open source ➢ abordagem MVC
  4. 4. Backbone.js ➢ dependências ○ Underscore.js ○ jQuery
  5. 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. 6. Model ➢ Criar um Model ➢ window.User = Backbone.Model.extend({});
  7. 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. 8. Model ➢ Definindo construtores window.User = Backbone.Model.extend({ initialize: function () { console.log("This model has been initialized"); } }
  9. 9. Model ➢ Valores default ➢ window.User = Backbone.Model.extend({ defaults: { name: "Seu Zé", email: "ze@dce.ufpb.br" } });
  10. 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. 11. Model ➢ Métodos Get e Set ➢user.set({name: "Smith"}); user.get("name");
  12. 12. View ➢ Organiza a interface ➢ Não possui código HTML ➢ Apoiada por Model’s (define como apresentá-los)
  13. 13. View Criar uma View var UserView = Backbone.View.extend({});
  14. 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. 15. View ➢ extend ○ para criação de views personalizadas ○ herda propiedades e funções ○ events, render, className, tagName
  16. 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. 17. View ➢ constructor/initialize ○ permite definir propriedades ○ executado quando a view é criada ➢ render ○ código para renderizar/atualizar o template
  18. 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. 19. Collection ➢ Collection são conjuntos de Modelos ➢var userList = Backbone.Collection.extend({ model: User });
  20. 20. Collection ➢ Os métodos add e remove ➢ var user = new User({name : "João Helis"}); var userList = new UserList(); taskList.add(user)
  21. 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. 22. Collection ➢ Carregando modelos a partir do servidor ➢ var userList = Backbone.Collection.extend({ url: '/user' ← model: User }); userList.fetch() ←
  23. 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. 24. Router ➢ inicialização ○ instancia o Router ○ inicia o monitoramento de mudanças nas URLs var app = new AppRouter(); Backbone.history.start();
  25. 25. Referência Documentação do Backbone.js: http://backbonejs.org Slides do Professor Yuri Malheiros
  26. 26. Backbone.js Dúvidas?

×