0
Interfaces ricas de forma clean
http://github.com/fellix          @rs_felix  http://www.crafters.com.br        @crafterstudiohttp://blog.rollingwithcode.com
Backbone é uma estrutura para aplicações com uso pesado dejavascriptProvendo modelos (models) com binding “chave-valor” ee...
Clean?
Não gera tags html
Não existem temas com tags pré definidas
Não mistura front-end com back-end
Componentes
Backbone.Model
Backbone.ModelCoração de umaaplicação JavaScript
Backbone.ModelCoração de umaaplicação JavaScriptAcesso a dados
Exemplo    window.Todo = Backbone.Model.extend({        toggle: function(){           this.save({done: !this.get("done")})...
Exemplo    window.Task = Backbone.Model.extend({        url: function(){           return this.id ? "/tasks/"+ this.id :  ...
Exemplo    window.Task = Backbone.Model.extend({        url: function(){           return this.id ? "/tasks/"+ this.id :  ...
Backbone.ModelComo funciona?
Backbone.ModelComo funciona?   save
Backbone.ModelComo funciona?   save          model.save({title: "texto"});
Backbone.ModelComo funciona?   save          model.save({title: "texto"});
Backbone.ModelComo funciona?   save                     model.save({title: "texto"});  url: function(){     return this.id...
Backbone.Collection
Backbone.CollectionColeções de Modelos
Exemplo    window.TodoList = Backbone.Collection.extend({        model: Todo,        localStorage: new Store("todos"),    ...
Exemplo    window.TaskCollection = Backbone.Collection.extend({        model: Task,        url: "/tasks"    });
Exemplo    window.TaskCollection = Backbone.Collection.extend({        model: Task,        url: "/tasks"    });
Backbone.Router
Backbone.RouterBaseado em #fragment
Backbone.RouterBaseado em #fragmentRotas
Exemplo window.Workspace = Backbone.Router.extend({     routes: {        "help": "help",        "search/:query": "search" ...
Exemplo window.Workspace = Backbone.Router.extend({     routes: {        "help": "help",                                  ...
Backbone.history
Backbone.historyGlobal Router
Backbone.historyGlobal Routerstart
Backbone.historyGlobal Routerstart           Backbone.history.start()
Backbone.View
Backbone.ViewOrganização
Exemplo window.TodoView = Backbone.View.extend({    tagName: "li",    className: "todo",    template: ._template("..."),  ...
Exemplo window.TodoView = Backbone.View.extend({    tagName: "li",    className: "todo",    template: ._template("..."),  ...
Exemplo window.TodoView = Backbone.View.extend({    tagName: "li",    className: "todo",    template: ._template("..."),  ...
Exemplo
Exemplo
Exemplo<div id=todoapp>      <div class=title>        <h1>Todos</h1>      </div>      <div class=content>        <div id=c...
Exemplo<div id=todoapp>      <div class=title>        <h1>Todos</h1>      </div>      <div class=content>        <div id=c...
Exemplo window.AppView = Backbone.View.extend({      el: $("todoapp"),  ...});window.App = new AppView;
Exemplo
Exemplo          TodoView          TodoView          TodoView
Exemplo<div id=todoapp>      <div class=title>        <h1>Todos</h1>      </div>      <div class=content>        <div id=c...
Exemplo<div id=todoapp>      <div class=title>        <h1>Todos</h1>      </div>      <div class=content>        <div id=c...
Exemplowindow.TodoView = Backbone.View.extend({      tagName: "li",    className: "todo",                                 ...
Exemplo          TodoView          TodoView          TodoView
Exemplo                           keypress event                           TodoView             click event   TodoView    ...
Exemplo<div id=todoapp>      <div class=title>        <h1>Todos</h1>                               keypress event      </d...
Exemplo<div id=todoapp>      <div class=title>        <h1>Todos</h1>                               keypress event      </d...
Exemplo<div id=todoapp>      <div class=title>        <h1>Todos</h1>                               keypress event      </d...
Exemplo                                                     keypress event                                                ...
Exemplo                                                     keypress event                                                ...
Exemplo                                                     keypress event                                                ...
Exemplo                                                     keypress event                                                ...
Exemplo                                                     keypress event    createOnEnter: function(e) {      if (e.code...
Exemplo                                                     keypress event    createOnEnter: function(e) {      if (e.code...
Exemplo                                                     keypress event    createOnEnter: function(e) {      if (e.code...
Exemplo                                                     keypress event    createOnEnter: function(e) {      if (e.code...
Exemplo                           keypress event                           TodoView             click event   TodoView    ...
Exemplowindow.TodoView = Backbone.View.extend({      tagName: "li",                                       keypress event  ...
Exemplowindow.TodoView = Backbone.View.extend({      tagName: "li",                                       keypress event  ...
Exemplowindow.TodoView = Backbone.View.extend({      tagName: "li",                                       keypress event  ...
Exemplowindow.TodoView = Backbone.View.extend({      tagName: "li",                                       keypress event  ...
Exemplowindow.TodoView = Backbone.View.extend({      tagName: "li",                                       keypress event  ...
Exemplo                                                keypress event                                                   To...
Exemplo                                                    keypress event                                                 ...
Exemplo                                                     keypress event                                                ...
Exemplo                                                     keypress event      render: function() {                      ...
Exemplo                                                     keypress event      render: function() {                      ...
Exemplo                                                       keypress event                                window.TodoVie...
Exemplo                                                     keypress event      render: function() {                      ...
Exemplo                                                     keypress event      render: function() {                      ...
Exemplo                            setContent: function() {                                                     keypress e...
Exemplo                           keypress event                           TodoView             click event   TodoView    ...
Exemplowindow.TodoView = Backbone.View.extend({      tagName: "li",                                       keypress event  ...
Exemplowindow.TodoView = Backbone.View.extend({      tagName: "li",                                       keypress event  ...
Exemplo                                                     keypress event  edit: function() {                            ...
Exemplo                                                      keypress event                                          setCo...
Exemplo                                                     keypress event    close: function() {                         ...
Exemplo                                                      keypress event     close: function() {                       ...
Exemplo                           keypress event                           TodoView             click event   TodoView    ...
Exemplo                                            TodoList                           keypress event                      ...
Exemplo<div id=todoapp>      <div class=title>        <h1>Todos</h1>                               keypress event      </d...
Exemplo<div id=todoapp>      <div class=title>        <h1>Todos</h1>                               keypress event      </d...
Exemplo  window.AppView = Backbone.View.extend({            keypress event     initialize: function() {       _.bindAll(th...
Exemplo  window.AppView = Backbone.View.extend({            keypress event     initialize: function() {       _.bindAll(th...
Exemplo  window.AppView = Backbone.View.extend({            keypress event     initialize: function() {       _.bindAll(th...
Exemplo  window.AppView = Backbone.View.extend({            keypress event     initialize: function() {       _.bindAll(th...
Exemplo  window.AppView = Backbone.View.extend({            keypress event     initialize: function() {       _.bindAll(th...
Exemplo  window.AppView = Backbone.View.extend({            keypress event     initialize: function() {       _.bindAll(th...
Exemplo                                               addOne: function(todo) {                                            ...
Exemplo                                                           addOne: function(todo) {                                ...
Exemplos
Exemplos
Exemplos
Exemplos
Exemplos
Exemploshttp://documentcloud.github.com/backbone/https://github.com/jeromegn/localtodoshttp://documentcloud.github.com/bac...
Obrigado!    http://github.com/fellix           @rs_felix   http://www.crafters.com.br         @crafterstudio http://blog....
Upcoming SlideShare
Loading in...5
×

Backbone - TDC 2011 Floripa

1,969

Published on

MInha apresentação sobre Backbone.js no TDC 2011 - Floripa

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,969
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
35
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Transcript of "Backbone - TDC 2011 Floripa"

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

    Clipping is a handy way to collect important slides you want to go back to later.

×