Refactor conversation view into two classes

One that resides in the left hand column as a list item, and another
which displays in the main column and handles ui events therein.

js/views/conversation_list_item_view.js

@@ -3,13 +3,12 @@ var Whisper = Whisper || {};
 (function () {
   'use strict';
 
-  Whisper.ConversationView = Backbone.View.extend({
+  Whisper.ConversationListItemView = Backbone.View.extend({
     tagName: 'li',
     className: 'conversation',
 
     events: {
       'click': 'open',
-      'submit form': 'sendMessage'
     },
     initialize: function() {
       this.template = $('#contact').html();
@@ -21,20 +20,8 @@ var Whisper = Whisper || {};
       this.$el.addClass('closed');
     },
 
-    sendMessage: function(e) {
-      if (!this.$input.val().length) { return false; }
-      this.model.sendMessage(this.$input.val());
-      this.$input.val("");
-      e.preventDefault();
-    },
-
-    remove: function() {
-      this.$el.remove();
-    },
-
     open: function(e) {
-      var v = new Whisper.MessageListView({collection: this.model.messages()});
-      v.render();
+      var v = new Whisper.ConversationView({el: $('#main'), model: this.model});
     },
 
     render: function() {

js/views/conversation_list_view.js

@@ -6,7 +6,7 @@ var Whisper = Whisper || {};
   Whisper.ConversationListView = Whisper.ListView.extend({
     tagName: 'ul',
     id: 'contacts',
-    itemView: Whisper.ConversationView,
+    itemView: Whisper.ConversationListItemView,
     collection: Whisper.Threads,
 
     events: {

js/views/conversation_view.js

@@ -0,0 +1,23 @@
+var Whisper = Whisper || {};
+
+(function () {
+  'use strict';
+
+  Whisper.ConversationView = Backbone.View.extend({
+    initialize: function() {
+      this.listenTo(this.model, 'destroy', this.remove); // auto update
+      var v = new Whisper.MessageListView({collection: this.model.messages()});
+      v.render();
+    },
+    events: {
+      'submit #new-message': 'sendMessage',
+    },
+
+    sendMessage: function(e) {
+      if (!this.$input.val().length) { return false; }
+      this.model.sendMessage(this.$input.val());
+      this.$input.val("");
+      e.preventDefault();
+    },
+  });
+})();

popup.html

@@ -94,11 +94,12 @@
 
 	<script type="text/javascript" src="js/chromium.js"></script>
 	<script type="text/javascript" src="js/views/notifications.js"></script>
-	<script type="text/javascript" src="js/views/message_view.js"></script>
 	<script type="text/javascript" src="js/views/list_view.js"></script>
+	<script type="text/javascript" src="js/views/message_view.js"></script>
 	<script type="text/javascript" src="js/views/message_list_view.js"></script>
-	<script type="text/javascript" src="js/views/conversations/show.js"></script>
+	<script type="text/javascript" src="js/views/conversation_list_item_view.js"></script>
 	<script type="text/javascript" src="js/views/conversation_list_view.js"></script>
+	<script type="text/javascript" src="js/views/conversation_view.js"></script>
 	<script type="text/javascript" src="js/views/conversations/new.js"></script>
 	<script type="text/javascript" src="js/popup.js"></script>
 </body>