title: Backbone.js : repopulate or recreate the view?
body: <p>In my web application, I have a user list in a table on the left, and a user detail pane on the right. When the admin clicks a user in the table, its details should be displayed on the right.</p>
  
  <p>I have a UserListView and UserRowView on the left, and a UserDetailView on the right. Things kind of work, but I have a weird behavior. If I click some users on the left, then click delete on one of them, I get successive javascript confirm boxes for all users that have been displayed. </p>
  
  <p>It looks like event bindings of all previously displayed views have not been removed, which seems to be normal. I should not do a new UserDetailView every time on UserRowView? Should I maintain a view and change its reference model? Should I keep track of the current view and remove it before creating a new one? I'm kind of lost and any idea will be welcome. Thank you !</p>
  
  <p>Here is the code of the left view (row display, click event, right view creation)</p>
  
  <pre><code>window.UserRowView = Backbone.View.extend({
      tagName : "tr",
      events : {
          "click" : "click",
      },
      render : function() {
          $(this.el).html(ich.bbViewUserTr(this.model.toJSON()));
          return this;
      },
      click : function() {
          var view = new UserDetailView({model:this.model})
          view.render()
      }
  })
  </code></pre>
  
  <p>And the code for right view (delete button)</p>
  
  <pre><code>window.UserDetailView = Backbone.View.extend({
      el : $("#bbBoxUserDetail"),
      events : {
          "click .delete" : "deleteUser"
      },
      initialize : function() {
          this.model.bind('destroy', function(){this.el.hide()}, this);
      },
      render : function() {
          this.el.html(ich.bbViewUserDetail(this.model.toJSON()));
          this.el.show();
      },
      deleteUser : function() {
          if (confirm("Really delete user " + this.model.get("login") + "?")) 
              this.model.destroy();
          return false;
      }
  })
  </code></pre>