public
derickbailey / 1-view-events.js
Last active

zombies! run!

  • Download Gist
1-view-events.js
JavaScript
File suppressed. Click to show.
1 2 3 4 5 6 7 8 9 10 
MyView = Backbone.View.extend({
 
  events: {
    "click #someButton": "doThat",
    "change #someInput": "changeIt"
  },
 
  doThat: function(){ ... },
  changeIt: function(){ ... }
});
2-view-model-events.js
JavaScript
File suppressed. Click to show.
1 2 3 4 5 6 7 8 
MyView = Backbone.View.extend({
 
  initialize: function(){
    this.model.bind("change", this.render, this);
  },
 
  render: function(){ ... }
});
3-event-aggregator.js
JavaScript
File suppressed. Click to show.
1 2 3 4 5 6 7 8 9 10 11 12 
MyView = Backbone.View.extend({
 
  initialize: function(){
    this.options.vent.bind("app:event", this.render, this);
  },
 
  render: function() { ... }
});
 
var vent = new _.extend({}, Backbone.Events);
new MyView({vent: vent});
vent.trigger("app:event");
4-router-zombies.js
JavaScript
File suppressed. Click to show.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 
MyRouter = Backbone.Router.extend({
  routes: {
    "": "home",
    "post/:id": "showPost"
  },
 
  home: function(){
    var homeView = new HomeView();
    $("#mainContent").html(homeView.render().el);
  },
 
  showPost: function(id){
    var post = posts.get(id);
    var postView = new PostView({model: post});
    $("#mainContent").html(postView.render().el);
  }
});
5-appview.js
JavaScript
File suppressed. Click to show.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 
function AppView(){
 
   this.showView(view) {
    if (this.currentView){
      this.currentView.close();
    }
 
    this.currentView = view;
    this.currentView.render();
 
    $("#mainContent").html(this.currentView.el);
  }
 
}
6-router.js
JavaScript
File suppressed. Click to show.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 
MyRouter = Backbone.Router.extend({
  routes: {
    "": "home",
    "post/:id": "showPost"
  },
 
  initialize: function(options){
    this.appView = options.appView;
  },
 
  home: function(){
    var homeView = new HomeView();
    this.appView.showView(homeView);
  },
 
  showPost: function(id){
    var post = posts.get(id);
    var postView = new PostView({model: post});
    this.appView.showView(postView);
  }
});
7-close.js
JavaScript
File suppressed. Click to show.
1 2 3 4 
Backbone.View.prototype.close = function(){
  this.remove();
  this.unbind();
}
8-close.js
JavaScript
File suppressed. Click to show.
1 2 3 4 5 6 7 
Backbone.View.prototype.close = function(){
  this.remove();
  this.unbind();
  if (this.onClose){
    this.onClose();
  }
}
9-onclose-view.js
JavaScript
File suppressed. Click to show.
1 2 3 4 5 6 7 8 9 10 11 
MyView = Backbone.View.extend({
  initialize: function(){
    this.model.bind("change", this.render, this);
  },
  render: function(){ ... },
 
  onClose: function(){
    this.model.unbind("change", this.render);
  }
 
});
eskimoblood commented

At your last example, wouldn' it be better to have an event object for models and/or collections like the one for the DOM events. Then you have a start and stop method where you can simple bind/unbind this events automatically. Its inspired by the architecture of GWT where every activity has a start and an optional stop method. https://gist.github.com/1410703

derickbailey commented

at the time I wrote this, that idea hadn't crossed my mind... but I'm doing basically that, now. it works really well. I'm using a combination of both techniques, depending on the situation.

eskimoblood commented

Btw, is it really necessary to delete the DOM events. Aren't they gone when the element is deleted?

derickbailey commented

i don't know if remove the elements from the DOM would clean them up directly or not. i know calling this.remove() will force jquery to clean them up and i can only imagine that jquery implemented the DOM event cleanup for a reason... but i don't know for sure

philfreo commented

You're missing the word function in 5-appview.js (this.showView(view) {)

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.