Backbone - TDC 2011 Floripa
-
Upload
rafael-felix-da-silva -
Category
Technology
-
view
1.960 -
download
0
description
Transcript of Backbone - TDC 2011 Floripa
![Page 1: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/1.jpg)
Interfaces ricas de forma clean
![Page 2: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/2.jpg)
http://github.com/fellix
@rs_felix
http://www.crafters.com.br @crafterstudio
http://blog.rollingwithcode.com
![Page 3: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/3.jpg)
Backbone é uma estrutura para aplicações com uso pesado de javascript
Provendo modelos (models) com binding “chave-valor” e eventos customizados
Coleções (collections) com uma rica API de funções.
Views com simples declaração de eventos
Conecta usando uma interface RESTful JSON
![Page 4: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/4.jpg)
Clean?
![Page 5: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/5.jpg)
Não gera tags html
![Page 6: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/6.jpg)
Não existem temas com tags pré definidas
![Page 7: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/7.jpg)
Não mistura front-end com back-end
![Page 8: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/8.jpg)
Componentes
![Page 9: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/9.jpg)
Backbone.Model
![Page 10: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/10.jpg)
Coração de uma aplicação JavaScript
Backbone.Model
![Page 11: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/11.jpg)
Coração de uma aplicação JavaScript
Acesso a dados
Backbone.Model
![Page 12: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/12.jpg)
Exemplo
window.Todo = Backbone.Model.extend({toggle: function(){
this.save({done: !this.get("done")});},clear: function(){
this.destroy();$(this.view.el).dispose();
}});
![Page 13: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/13.jpg)
Exemplo
window.Task = Backbone.Model.extend({url: function(){
return this.id ? "/tasks/"+ this.id : "/tasks/";
},defaults:{ task: {
title: "nothing"} }
});
![Page 14: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/14.jpg)
Exemplo
window.Task = Backbone.Model.extend({url: function(){
return this.id ? "/tasks/"+ this.id : "/tasks/";
},defaults:{ task: {
title: "nothing"} }
});
![Page 15: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/15.jpg)
Backbone.ModelComo funciona?
![Page 16: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/16.jpg)
Backbone.ModelComo funciona?
save
![Page 17: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/17.jpg)
Backbone.ModelComo funciona?
save model.save({title: "texto"});
![Page 18: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/18.jpg)
Backbone.ModelComo funciona?
save model.save({title: "texto"});
![Page 19: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/19.jpg)
Backbone.ModelComo funciona?
save model.save({title: "texto"});
url: function(){return this.id ? "/tasks/"+ this.id : "/tasks/";
}
![Page 20: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/20.jpg)
Backbone.Collection
![Page 21: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/21.jpg)
Backbone.Collection
Coleções de Modelos
![Page 22: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/22.jpg)
Exemplo
window.TodoList = Backbone.Collection.extend({model: Todo,localStorage: new Store("todos"),done: function(){
return this.filter(function(todo){return todo.get("done");
});}
});
![Page 23: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/23.jpg)
Exemplo
window.TaskCollection = Backbone.Collection.extend({model: Task,url: "/tasks"
});
![Page 24: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/24.jpg)
Exemplo
window.TaskCollection = Backbone.Collection.extend({model: Task,url: "/tasks"
});
![Page 25: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/25.jpg)
Backbone.Router
![Page 26: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/26.jpg)
Backbone.RouterBaseado em #fragment
![Page 27: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/27.jpg)
Backbone.RouterBaseado em #fragment
Rotas
![Page 28: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/28.jpg)
Exemplowindow.Workspace = Backbone.Router.extend({
routes: {"help": "help","search/:query": "search"
},help: function(){
...},search: function(query){
...},
});
![Page 29: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/29.jpg)
Exemplowindow.Workspace = Backbone.Router.extend({
routes: {"help": "help","search/:query": "search"
},help: function(){
...},search: function(query){
...},
});
#help
#search/kiwis
![Page 30: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/30.jpg)
Backbone.history
![Page 31: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/31.jpg)
Backbone.historyGlobal Router
![Page 32: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/32.jpg)
Backbone.historyGlobal Router
start
![Page 33: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/33.jpg)
Backbone.historyGlobal Router
start Backbone.history.start()
![Page 34: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/34.jpg)
Backbone.View
![Page 35: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/35.jpg)
Backbone.ViewOrganização
![Page 36: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/36.jpg)
Exemplowindow.TodoView = Backbone.View.extend({
tagName: "li",className: "todo",template: ._template("..."),events: {
"click .todo-check": "toogleDone","dblclick .todo-content": "edit",...
},initialize: function(){
._bindAll(this, "render", "close");this.model.bind("change", this.render);this.model.view = this;
}...});
![Page 37: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/37.jpg)
Exemplowindow.TodoView = Backbone.View.extend({
tagName: "li",className: "todo",template: ._template("..."),events: {
"click .todo-check": "toogleDone","dblclick .todo-content": "edit",...
},initialize: function(){
._bindAll(this, "render", "close");this.model.bind("change", this.render);this.model.view = this;
}...});
![Page 38: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/38.jpg)
Exemplowindow.TodoView = Backbone.View.extend({
tagName: "li",className: "todo",template: ._template("..."),events: {
"click .todo-check": "toogleDone","dblclick .todo-content": "edit",...
},initialize: function(){
._bindAll(this, "render", "close");this.model.bind("change", this.render);this.model.view = this;
}...});
![Page 39: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/39.jpg)
Exemplo
![Page 40: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/40.jpg)
Exemplo
![Page 41: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/41.jpg)
Exemplo
<div id='todoapp'> <div class='title'> <h1>Todos</h1> </div> <div class='content'> <div id='create-todo'> <input id='new-todo' placeholder='What needs to be done?' type='text' /> <span class='ui-tooltip-top'>Press Enter to create this task</span> </div> <div id='todos'> <ul id='todo-list'></ul> </div> </div> <div id='todo-stats'></div> </div>
![Page 42: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/42.jpg)
Exemplo
<div id='todoapp'> <div class='title'> <h1>Todos</h1> </div> <div class='content'> <div id='create-todo'> <input id='new-todo' placeholder='What needs to be done?' type='text' /> <span class='ui-tooltip-top'>Press Enter to create this task</span> </div> <div id='todos'> <ul id='todo-list'></ul> </div> </div> <div id='todo-stats'></div> </div>
![Page 43: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/43.jpg)
Exemplo
window.AppView = Backbone.View.extend({ el: $("todoapp"),
...});
window.App = new AppView;
![Page 44: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/44.jpg)
Exemplo
![Page 45: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/45.jpg)
Exemplo
TodoViewTodoViewTodoView
![Page 46: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/46.jpg)
Exemplo
TodoViewTodoViewTodoView
<div id='todoapp'> <div class='title'> <h1>Todos</h1> </div> <div class='content'> <div id='create-todo'> <input id='new-todo' placeholder='What needs to be done?' type='text' /> <span class='ui-tooltip-top'>Press Enter to create this task</span> </div> <div id='todos'> <ul id='todo-list'></ul> </div> </div> <div id='todo-stats'></div> </div>
![Page 47: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/47.jpg)
Exemplo
TodoViewTodoViewTodoView
<div id='todoapp'> <div class='title'> <h1>Todos</h1> </div> <div class='content'> <div id='create-todo'> <input id='new-todo' placeholder='What needs to be done?' type='text' /> <span class='ui-tooltip-top'>Press Enter to create this task</span> </div> <div id='todos'> <ul id='todo-list'></ul> </div> </div> <div id='todo-stats'></div> </div>
![Page 48: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/48.jpg)
Exemplo
TodoViewTodoViewTodoView
window.TodoView = Backbone.View.extend({ tagName: "li", className: "todo", template: _.template("<input type='checkbox' class='todo-check' /><div class='todo-content'></div><span class='todo-destroy'></span><input type='text' class='todo-input' />"),
...});
![Page 49: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/49.jpg)
Exemplo
TodoViewTodoViewTodoView
![Page 50: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/50.jpg)
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
![Page 51: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/51.jpg)
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
<div id='todoapp'> <div class='title'> <h1>Todos</h1> </div> <div class='content'> <div id='create-todo'> <input id='new-todo' placeholder='What needs to be done?' type='text' /> <span class='ui-tooltip-top'>Press Enter to create this task</span> </div> <div id='todos'> <ul id='todo-list'></ul> </div> </div> <div id='todo-stats'></div> </div>
![Page 52: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/52.jpg)
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
<div id='todoapp'> <div class='title'> <h1>Todos</h1> </div> <div class='content'> <div id='create-todo'> <input id='new-todo' placeholder='What needs to be done?' type='text' /> <span class='ui-tooltip-top'>Press Enter to create this task</span> </div> <div id='todos'> <ul id='todo-list'></ul> </div> </div> <div id='todo-stats'></div> </div>
![Page 53: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/53.jpg)
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
<div id='todoapp'> <div class='title'> <h1>Todos</h1> </div> <div class='content'> <div id='create-todo'> <input id='new-todo' placeholder='What needs to be done?' type='text' /> <span class='ui-tooltip-top'>Press Enter to create this task</span> </div> <div id='todos'> <ul id='todo-list'></ul> </div> </div> <div id='todo-stats'></div> </div>
![Page 54: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/54.jpg)
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
window.AppView = Backbone.View.extend({ el: $("todoapp"), statsTemplate: _.template('...'), events: { "keypress #new-todo" : "createOnEnter", ... }, });
![Page 55: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/55.jpg)
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
window.AppView = Backbone.View.extend({ el: $("todoapp"), statsTemplate: _.template('...'), events: { "keypress #new-todo" : "createOnEnter", ... }, });
![Page 56: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/56.jpg)
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
window.AppView = Backbone.View.extend({ el: $("todoapp"), statsTemplate: _.template('...'), events: { "keypress #new-todo" : "createOnEnter", ... }, });
![Page 57: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/57.jpg)
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
window.AppView = Backbone.View.extend({ el: $("todoapp"), statsTemplate: _.template('...'), events: { "keypress #new-todo" : "createOnEnter", ... }, });
![Page 58: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/58.jpg)
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
createOnEnter: function(e) { if (e.code != 13) return; Todos.create({ content: this.input.getProperty("value"), done: false }); this.input.setProperty("value", ""); }
![Page 59: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/59.jpg)
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
createOnEnter: function(e) { if (e.code != 13) return; Todos.create({ content: this.input.getProperty("value"), done: false }); this.input.setProperty("value", ""); }
![Page 60: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/60.jpg)
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
createOnEnter: function(e) { if (e.code != 13) return; Todos.create({ content: this.input.getProperty("value"), done: false }); this.input.setProperty("value", ""); }
![Page 61: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/61.jpg)
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
createOnEnter: function(e) { if (e.code != 13) return; Todos.create({ content: this.input.getProperty("value"), done: false }); this.input.setProperty("value", ""); }
![Page 62: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/62.jpg)
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
![Page 63: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/63.jpg)
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
window.TodoView = Backbone.View.extend({ tagName: "li", className: "todo", template: _.template("<input type='checkbox' class='todo-check' /><div class='todo-content'></div><span class='todo-destroy'></span><input type='text' class='todo-input' />"),
events: { "click .todo-check" : "toggleDone", "dblclick .todo-content" : "edit", "click .todo-destroy" : "clear", "keypress .todo-input" : "updateOnEnter" },...});
![Page 64: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/64.jpg)
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
window.TodoView = Backbone.View.extend({ tagName: "li", className: "todo", template: _.template("<input type='checkbox' class='todo-check' /><div class='todo-content'></div><span class='todo-destroy'></span><input type='text' class='todo-input' />"),
events: { "click .todo-check" : "toggleDone", "dblclick .todo-content" : "edit", "click .todo-destroy" : "clear", "keypress .todo-input" : "updateOnEnter" },...});
![Page 65: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/65.jpg)
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
window.TodoView = Backbone.View.extend({ tagName: "li", className: "todo", template: _.template("<input type='checkbox' class='todo-check' /><div class='todo-content'></div><span class='todo-destroy'></span><input type='text' class='todo-input' />"),
events: { "click .todo-check" : "toggleDone", "dblclick .todo-content" : "edit", "click .todo-destroy" : "clear", "keypress .todo-input" : "updateOnEnter" },...});
![Page 66: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/66.jpg)
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
window.TodoView = Backbone.View.extend({ tagName: "li", className: "todo", template: _.template("<input type='checkbox' class='todo-check' /><div class='todo-content'></div><span class='todo-destroy'></span><input type='text' class='todo-input' />"),
events: { "click .todo-check" : "toggleDone", "dblclick .todo-content" : "edit", "click .todo-destroy" : "clear", "keypress .todo-input" : "updateOnEnter" },...});
![Page 67: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/67.jpg)
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
window.TodoView = Backbone.View.extend({ tagName: "li", className: "todo", template: _.template("<input type='checkbox' class='todo-check' /><div class='todo-content'></div><span class='todo-destroy'></span><input type='text' class='todo-input' />"),
events: { "click .todo-check" : "toggleDone", "dblclick .todo-content" : "edit", "click .todo-destroy" : "clear", "keypress .todo-input" : "updateOnEnter" },...});
![Page 68: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/68.jpg)
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
toggleDone: function() { this.model.toggle(); }
![Page 69: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/69.jpg)
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
toggleDone: function() { this.model.toggle(); }
toggle: function() { this.save({done: !this.get("done")}); }
![Page 70: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/70.jpg)
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
toggleDone: function() { this.model.toggle(); }
initialize: function() { _.bindAll(this, 'render', 'close'); this.model.bind('change', this.render); this.model.view = this; }
![Page 71: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/71.jpg)
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
render: function() { $(this.el).set('html', this.template(this.model.toJSON())); $(this.el).setProperty("id", "todo-"+this.model.id); this.setContent(); sortableTodos.addItems(this.el); return this; }
![Page 72: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/72.jpg)
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
render: function() { $(this.el).set('html', this.template(this.model.toJSON())); $(this.el).setProperty("id", "todo-"+this.model.id); this.setContent(); sortableTodos.addItems(this.el); return this; }
![Page 73: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/73.jpg)
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
render: function() { $(this.el).set('html', this.template(this.model.toJSON())); $(this.el).setProperty("id", "todo-"+this.model.id); this.setContent(); sortableTodos.addItems(this.el); return this; }
window.TodoView = Backbone.View.extend({ tagName: "li", className: "todo"
...});
![Page 74: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/74.jpg)
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
render: function() { $(this.el).set('html', this.template(this.model.toJSON())); $(this.el).setProperty("id", "todo-"+this.model.id); this.setContent(); sortableTodos.addItems(this.el); return this; }
![Page 75: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/75.jpg)
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
render: function() { $(this.el).set('html', this.template(this.model.toJSON())); $(this.el).setProperty("id", "todo-"+this.model.id); this.setContent(); sortableTodos.addItems(this.el); return this; }
![Page 76: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/76.jpg)
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
render: function() { $(this.el).set('html', this.template(this.model.toJSON())); $(this.el).setProperty("id", "todo-"+this.model.id); this.setContent(); sortableTodos.addItems(this.el); return this; }
setContent: function() { var content = this.model.get('content'); this.$('.todo-content').set("html", content); this.$('.todo-input').setProperty("value", content); if (this.model.get('done')) { this.$(".todo-check").setProperty("checked", "checked"); $(this.el).addClass("done"); } else { this.$(".todo-check").removeProperty("checked"); $(this.el).removeClass("done"); } this.input = this.$(".todo-input"); this.input.addEvent('blur', this.close); }
![Page 77: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/77.jpg)
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
![Page 78: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/78.jpg)
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
window.TodoView = Backbone.View.extend({ tagName: "li", className: "todo", template: _.template("<input type='checkbox' class='todo-check' /><div class='todo-content'></div><span class='todo-destroy'></span><input type='text' class='todo-input' />"),
events: { "click .todo-check" : "toggleDone", "dblclick .todo-content" : "edit", "click .todo-destroy" : "clear", "keypress .todo-input" : "updateOnEnter" },...});
![Page 79: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/79.jpg)
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
window.TodoView = Backbone.View.extend({ tagName: "li", className: "todo", template: _.template("<input type='checkbox' class='todo-check' /><div class='todo-content'></div><span class='todo-destroy'></span><input type='text' class='todo-input' />"),
events: { "click .todo-check" : "toggleDone", "dblclick .todo-content" : "edit", "click .todo-destroy" : "clear", "keypress .todo-input" : "updateOnEnter" },...});
![Page 80: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/80.jpg)
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
edit: function() { $(this.el).addClass("editing");
this.input.focus(); }
![Page 81: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/81.jpg)
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
edit: function() { $(this.el).addClass("editing");
this.input.focus(); }
setContent: function() { ... this.input.addEvent('blur', this.close); }
![Page 82: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/82.jpg)
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
close: function() { this.model.save({content: this.input.getProperty("value")}); $(this.el).removeClass("editing"); }
![Page 83: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/83.jpg)
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
close: function() { this.model.save({content: this.input.getProperty("value")}); $(this.el).removeClass("editing"); }
save change render
![Page 84: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/84.jpg)
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
![Page 85: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/85.jpg)
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
TodoList
![Page 86: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/86.jpg)
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
<div id='todoapp'> <div class='title'> <h1>Todos</h1> </div> <div class='content'> <div id='create-todo'> <input id='new-todo' placeholder='What needs to be done?' type='text' /> <span class='ui-tooltip-top'>Press Enter to create this task</span> </div> <div id='todos'> <ul id='todo-list'></ul> </div> </div> <div id='todo-stats'></div> </div>
![Page 87: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/87.jpg)
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
<div id='todoapp'> <div class='title'> <h1>Todos</h1> </div> <div class='content'> <div id='create-todo'> <input id='new-todo' placeholder='What needs to be done?' type='text' /> <span class='ui-tooltip-top'>Press Enter to create this task</span> </div> <div id='todos'> <ul id='todo-list'></ul> </div> </div> <div id='todo-stats'></div> </div>
![Page 88: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/88.jpg)
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
window.AppView = Backbone.View.extend({
initialize: function() { _.bindAll(this, 'addOne', 'addAll', 'render'); this.input = this.$("#new-todo"); Todos.bind('add', this.addOne); Todos.bind('refresh', this.addAll); Todos.bind('all', this.render); Todos.fetch(); } });
![Page 89: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/89.jpg)
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
window.AppView = Backbone.View.extend({
initialize: function() { _.bindAll(this, 'addOne', 'addAll', 'render'); this.input = this.$("#new-todo"); Todos.bind('add', this.addOne); Todos.bind('refresh', this.addAll); Todos.bind('all', this.render); Todos.fetch(); } });
![Page 90: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/90.jpg)
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
window.AppView = Backbone.View.extend({
initialize: function() { _.bindAll(this, 'addOne', 'addAll', 'render'); this.input = this.$("#new-todo"); Todos.bind('add', this.addOne); Todos.bind('refresh', this.addAll); Todos.bind('all', this.render); Todos.fetch(); } });
![Page 91: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/91.jpg)
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
window.AppView = Backbone.View.extend({
initialize: function() { _.bindAll(this, 'addOne', 'addAll', 'render'); this.input = this.$("#new-todo"); Todos.bind('add', this.addOne); Todos.bind('refresh', this.addAll); Todos.bind('all', this.render); Todos.fetch(); } });
![Page 92: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/92.jpg)
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
window.AppView = Backbone.View.extend({
initialize: function() { _.bindAll(this, 'addOne', 'addAll', 'render'); this.input = this.$("#new-todo"); Todos.bind('add', this.addOne); Todos.bind('refresh', this.addAll); Todos.bind('all', this.render); Todos.fetch(); } });
![Page 93: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/93.jpg)
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
window.AppView = Backbone.View.extend({
initialize: function() { _.bindAll(this, 'addOne', 'addAll', 'render'); this.input = this.$("#new-todo"); Todos.bind('add', this.addOne); Todos.bind('refresh', this.addAll); Todos.bind('all', this.render); Todos.fetch(); } });
addAll: function() { Todos.each(this.addOne); }
![Page 94: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/94.jpg)
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
window.AppView = Backbone.View.extend({
initialize: function() { _.bindAll(this, 'addOne', 'addAll', 'render'); this.input = this.$("#new-todo"); Todos.bind('add', this.addOne); Todos.bind('refresh', this.addAll); Todos.bind('all', this.render); Todos.fetch(); } });
addOne: function(todo) { var view = new TodoView({model: todo}).render().el; this.$("#todo-list").grab(view); ... }
addAll: function() { Todos.each(this.addOne); }
![Page 95: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/95.jpg)
Exemplo
TodoViewTodoViewTodoView
keypress event
click event
dblclick event
window.AppView = Backbone.View.extend({
initialize: function() { _.bindAll(this, 'addOne', 'addAll', 'render'); this.input = this.$("#new-todo"); Todos.bind('add', this.addOne); Todos.bind('refresh', this.addAll); Todos.bind('all', this.render); Todos.fetch(); } });
addOne: function(todo) { var view = new TodoView({model: todo}).render().el; this.$("#todo-list").grab(view); ... }
addAll: function() { Todos.each(this.addOne); }
<ul id='todo-list'></ul>
![Page 96: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/96.jpg)
Exemplos
![Page 97: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/97.jpg)
Exemplos
![Page 98: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/98.jpg)
Exemplos
![Page 99: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/99.jpg)
Exemplos
![Page 100: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/100.jpg)
Exemplos
![Page 101: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/101.jpg)
Exemplos
http://documentcloud.github.com/backbone/examples/todos
http://www.documentcloud.org/public/search/
http://www.linkedin.com/static?key=mobile
http://basecamphq.com/mobile
https://www.apptrajectory.com/
http://documentcloud.github.com/backbone/
https://github.com/jeromegn/localtodos
![Page 102: Backbone - TDC 2011 Floripa](https://reader034.fdocuments.net/reader034/viewer/2022042513/554bcd91b4c905ac708b4743/html5/thumbnails/102.jpg)
Obrigado!http://github.com/fellix
@rs_felix
http://www.crafters.com.br @crafterstudio
http://blog.rollingwithcode.com