title: How to unbind all the socket.io events from my backbone view?
body: <p>I have a page which include two backbone views (views related to two template). I am changing content of one views based on clicking event on different items on another view. For this, Every time I click on any items in one view I just create a instance of another view which include some socket.io events. At the first time It's work well but everytime I click on item on first view it just create the instance of 2nd one so that all the socket.io events is binding. Except first click every time I click on items on first view and call an socket.io events, it fired more than one time based on how many click I have done to different items.</p>
  
  <p>I know that every time I click an items it create an instance of a view with socket.io  event bind. But I can not get the way to unbind the previous socket.io events.</p>
  
  <p>I have tried to use this reference:
  <a href="https://stackoverflow.com/questions/9080763/backbone-js-view-removing-and-unbinding">Backbone.js View removing and unbinding</a>
  But it is not working in my case. May be I did not use it in proper way.</p>
  
  <p>Can anyone please give me a solution or way to unbind all the socket.io events binded before?</p>
  
  <p>Here is my Clicking event from where I am creating a new instance of another view where all the socket.io events binds.</p>
  
  <pre><code> LoadQueueDetails: function (e) {
      e.preventDefault();
      var queues = new Queues();
  
      queues.fetch({
          data: $.param({ Code: this.model.get("QueueCode") }),
          success: function () {
              $("#grid21").html(new SearchResultListView({ collection: queues }).el);
          },
          error: function (queues) {
              alert('error found in fetch queue details');
          }
      });
     }
  </code></pre>
  
  <p>And here is my actual view where I bind all the socket.io events.</p>
  
  <pre><code>window.SearchResultListView = Backbone.View.extend({
  
  initialize: function () {
      this.collection.on('change', this.render, this);
      this.render();
  },
  
  render: function () {
      var Queues = this.collection;
      var len = Queues.length;
  
      $(this.el).html(this.template());
  
      for (var i = 0; i &lt; len; i++) {
          $('.QueueListItem', this.el).append(new SearchResultListItemView({ model: Queues.models[i]}).render().el);
      }
      return this;
   }
  });
  
  
  window.SearchResultListItemView = MainView.extend({
  tagName: "tr",
  
  initialize: function () {
  
      this.__initialize();
  
      var user;
      if ($.super_cookie().check("user_cookie")) {
          this.user = $.super_cookie().read_JSON("user_cookie");
      }     
  
      this.model.bind("change", this.render, this);
      this.model.on("destroy", this.close, this);
      socket.emit('adduser', this.user.UserName, this.model.get("Code"));
  },
  
  events: {
      "click a": "JoinQueue"
  },
  
  onClose: function(){
      this.model.unbind("change", this.render);
  },
  close: function () {
      this.remove();
      this.unbind();
      this.model.unbind("change", this.render);
  },
  socket_events: {
      "updatechat": "updatechat",
      "changeroom": "changedroom"
  },
  changedroom: function (username, data) {
      alert(data);
      socket.emit('switchRoom', data);
  },
  
  updatechat: function (username, data) {
      alert(username);
      alert(data);
  },
  
  JoinQueue: function (e) {
      e.preventDefault();
  
      if ($.super_cookie().check("user_cookie")) {
          user = $.super_cookie().read_JSON("user_cookie");
      }
  
      socket.emit('sendchat', "new user");
  },
  
  render: function () {
      var data = this.model.toJSON();
      _.extend(data, this.attributes);
      $(this.el).html(this.template(data));
      return this;
  }
  });
  
  
  window.Queue = Backbone.Model.extend({
  
  urlRoot: "/queue",
  initialize: function () {
  },
  
  defaults: {
      _id:null,
      Code: null,
      ServiceEntityId: null,
      ServiceEntityName:null,
      Name: null,
      NoOfWaiting: null,
      ExpectedTimeOfService: null,
      Status: null,
      SmsCode: null
  }
  
  });
  
  window.Queues = Backbone.Collection.extend({
  model: Queue,
  url: "/queue",
  
  initialize: function () {
  }
  });
  
  Backbone.View.prototype.close = function () {
  this.remove();
  this.unbind();
  if (this.onClose) {
      this.onClose();
  }
  }
  </code></pre>
  
  <p>And this is my main view to bind socket.io event in searchResultItemview.</p>
  
  <pre><code>var MainView = Backbone.View.extend({
  initialize: function () {
      this.__initialize();
  },
  
  __initialize: function () {
      if (this.socket_events &amp;&amp; _.size(this.socket_events) &gt; 0) {
          this.delegateSocketEvents(this.socket_events);
      }
  },
  
  delegateSocketEvents: function (events) {
  
      for (var key in events) {
          var method = events[key];
          if (!_.isFunction(method)) {
              method = this[events[key]];
          }
  
          if (!method) {
              throw new Error('Method "' + events[key] + '" does not exist');
          }
  
          method = _.bind(method, this);
          socket.on(key, method);
      };
  }
  });
  </code></pre>
  
  <p>For extra information:</p>
  
  <pre><code>1. I am opening socket connection globally. Like this :
     var socket = io.connect('http://localhost:3000');
  </code></pre>
  
  <p>I am waiting for any kind of advice or solution to get out of this problem. Please feel free to ask any kind of inquiries.</p>