Backbone.js

João HelisSmith Ascari

http://backbonejs.org

Agenda1. Backbone.js2. Model 3. View4. Collection5. Router6. Cinephilebox

Backbone.js➢ framework em javascript para estruturar

aplicações web.

➢ Client-side

➢ open source

➢ abordagem MVC

Backbone.js➢ dependências

○ Underscore.js○ jQuery

Model

➢ O coração de qualquer aplicação javaScript

➢ Contém os dados da aplicação e grande

parte da sua lógica

Model➢ Criar um Model

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

Model➢ Criando uma instancia do Model

➢var user = new User()

var user = new User({ name:"João Helis", email:"joaohelis.bernardo@dce.ufpb.br" })

Model➢ Definindo construtores

window.User = Backbone.Model.extend({

initialize: function () {console.log("This model has been initialized");

}}

Model➢ Valores default

➢

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

});

ModelOs 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)

Model➢ Métodos Get e Set

➢user.set({name: "Smith"});

user.get("name");

View➢ Organiza a interface

➢ Não possui código HTML

➢ Apoiada por Model’s (define como apresentá-los)

ViewCriar uma View

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

ViewCriar view

var UserView = Backbone.View.extend({

initialize: function () { this.render(); },

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

View

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

View➢ el

○ é um elemento do DOM○ o conteúdo da view é inserido nele

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

View➢ constructor/initialize

○ permite definir propriedades○ executado quando a view é criada

➢ render○ código para renderizar/atualizar o template

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

Collection➢ Collection são conjuntos de Modelos

➢var userList = Backbone.Collection.extend({model: User

});

Collection➢ Os métodos add e remove

➢var user = new User({name : "João Helis"});

var userList = new UserList();taskList.add(user)

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

Collection➢ Carregando modelos a partir do servidor

➢var userList = Backbone.Collection.extend({

url: '/user' ←model: User

});

userList.fetch() ←

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

Router➢ inicialização

○ instancia o Router

○ inicia o monitoramento de mudanças nas URLs

var app = new AppRouter();

Backbone.history.start();

Referência

Documentação do Backbone.js: http://backbonejs.org

Slides do Professor Yuri Malheiros

Backbone.js

Dúvidas?