Transcript
Page 1: Backbone - TDC 2011 Floripa

Interfaces ricas de forma clean

Page 3: Backbone - TDC 2011 Floripa

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

Clean?

Page 5: Backbone - TDC 2011 Floripa

Não gera tags html

Page 6: Backbone - TDC 2011 Floripa

Não existem temas com tags pré definidas

Page 7: Backbone - TDC 2011 Floripa

Não mistura front-end com back-end

Page 8: Backbone - TDC 2011 Floripa

Componentes

Page 9: Backbone - TDC 2011 Floripa

Backbone.Model

Page 10: Backbone - TDC 2011 Floripa

Coração de uma aplicação JavaScript

Backbone.Model

Page 11: Backbone - TDC 2011 Floripa

Coração de uma aplicação JavaScript

Acesso a dados

Backbone.Model

Page 12: Backbone - TDC 2011 Floripa

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

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

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

Backbone.ModelComo funciona?

Page 16: Backbone - TDC 2011 Floripa

Backbone.ModelComo funciona?

save

Page 17: Backbone - TDC 2011 Floripa

Backbone.ModelComo funciona?

save model.save({title: "texto"});

Page 18: Backbone - TDC 2011 Floripa

Backbone.ModelComo funciona?

save model.save({title: "texto"});

Page 19: Backbone - TDC 2011 Floripa

Backbone.ModelComo funciona?

save model.save({title: "texto"});

url: function(){return this.id ? "/tasks/"+ this.id : "/tasks/";

}

Page 20: Backbone - TDC 2011 Floripa

Backbone.Collection

Page 21: Backbone - TDC 2011 Floripa

Backbone.Collection

Coleções de Modelos

Page 22: Backbone - TDC 2011 Floripa

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

Exemplo

window.TaskCollection = Backbone.Collection.extend({model: Task,url: "/tasks"

});

Page 24: Backbone - TDC 2011 Floripa

Exemplo

window.TaskCollection = Backbone.Collection.extend({model: Task,url: "/tasks"

});

Page 25: Backbone - TDC 2011 Floripa

Backbone.Router

Page 26: Backbone - TDC 2011 Floripa

Backbone.RouterBaseado em #fragment

Page 27: Backbone - TDC 2011 Floripa

Backbone.RouterBaseado em #fragment

Rotas

Page 28: Backbone - TDC 2011 Floripa

Exemplowindow.Workspace = Backbone.Router.extend({

routes: {"help": "help","search/:query": "search"

},help: function(){

...},search: function(query){

...},

});

Page 29: Backbone - TDC 2011 Floripa

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

Backbone.history

Page 31: Backbone - TDC 2011 Floripa

Backbone.historyGlobal Router

Page 32: Backbone - TDC 2011 Floripa

Backbone.historyGlobal Router

start

Page 33: Backbone - TDC 2011 Floripa

Backbone.historyGlobal Router

start Backbone.history.start()

Page 34: Backbone - TDC 2011 Floripa

Backbone.View

Page 35: Backbone - TDC 2011 Floripa

Backbone.ViewOrganização

Page 36: Backbone - TDC 2011 Floripa

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

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

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

Exemplo

Page 40: Backbone - TDC 2011 Floripa

Exemplo

Page 41: Backbone - TDC 2011 Floripa

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

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

Exemplo

 window.AppView = Backbone.View.extend({      el: $("todoapp"),

...});

window.App = new AppView;

Page 44: Backbone - TDC 2011 Floripa

Exemplo

Page 45: Backbone - TDC 2011 Floripa

Exemplo

TodoViewTodoViewTodoView

Page 46: Backbone - TDC 2011 Floripa

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

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

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

Exemplo

TodoViewTodoViewTodoView

Page 50: Backbone - TDC 2011 Floripa

Exemplo

TodoViewTodoViewTodoView

keypress event

click event

dblclick event

Page 51: Backbone - TDC 2011 Floripa

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

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

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

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

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

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

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

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

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

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

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

Exemplo

TodoViewTodoViewTodoView

keypress event

click event

dblclick event

Page 63: Backbone - TDC 2011 Floripa

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

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

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

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

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

Exemplo

TodoViewTodoViewTodoView

keypress event

click event

dblclick event

       toggleDone: function() {      this.model.toggle();    }

Page 69: Backbone - TDC 2011 Floripa

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

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

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

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

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

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

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

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

Exemplo

TodoViewTodoViewTodoView

keypress event

click event

dblclick event

Page 78: Backbone - TDC 2011 Floripa

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

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

Exemplo

TodoViewTodoViewTodoView

keypress event

click event

dblclick event

edit: function() {     $(this.el).addClass("editing");

this.input.focus();  }

Page 81: Backbone - TDC 2011 Floripa

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

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

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

Exemplo

TodoViewTodoViewTodoView

keypress event

click event

dblclick event

Page 85: Backbone - TDC 2011 Floripa

Exemplo

TodoViewTodoViewTodoView

keypress event

click event

dblclick event

TodoList

Page 86: Backbone - TDC 2011 Floripa

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

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

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

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

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

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

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

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

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

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

Exemplos

Page 97: Backbone - TDC 2011 Floripa

Exemplos

Page 98: Backbone - TDC 2011 Floripa

Exemplos

Page 99: Backbone - TDC 2011 Floripa

Exemplos

Page 100: Backbone - TDC 2011 Floripa

Exemplos