DRY up a common view pattern

Define a Whisper.View base class that automatically parses and renders
templates and attributes defined by the subclass. This saves us a good
number of lines of code as well as some marginal memory overhead, since
we are no longer saving per-instance copies of template strings.

conversation.html

@@ -134,6 +134,7 @@
 
         <script type="text/javascript" src="js/chromium.js"></script>
 
+        <script type="text/javascript" src="js/views/whisper_view.js"></script>
         <script type="text/javascript" src="js/views/toast_view.js"></script>
         <script type="text/javascript" src="js/views/attachment_preview_view.js"></script>
         <script type="text/javascript" src="js/views/file_input_view.js"></script>

index.html

@@ -88,6 +88,7 @@
 
         <script type="text/javascript" src="js/chromium.js"></script>
 
+        <script type="text/javascript" src="js/views/whisper_view.js"></script>
         <script type="text/javascript" src="js/views/toast_view.js"></script>
         <script type="text/javascript" src="js/views/attachment_preview_view.js"></script>
         <script type="text/javascript" src="js/views/file_input_view.js"></script>

js/views/attachment_preview_view.js

@@ -17,15 +17,11 @@ var Whisper = Whisper || {};
 
 (function () {
     'use strict';
-    Whisper.AttachmentPreviewView = Backbone.View.extend({
+    Whisper.AttachmentPreviewView = Whisper.View.extend({
         className: 'attachment-preview',
-        initialize: function() {
+        template: $('#attachment-preview').html(),
-            this.template = $('#attachment-preview').html();
+        attributes: function() {
-            Mustache.parse(this.template);
+            return {source: this.src};
-        },
-        render: function() {
-            this.$el.html(Mustache.render(this.template, {source: this.src}));
-            return this;
         }
     });
 })();

js/views/conversation_list_item_view.js

@@ -20,17 +20,15 @@ var Whisper = Whisper || {};
   'use strict';
 
   // list of conversations, showing user/group and last message sent
-  Whisper.ConversationListItemView = Backbone.View.extend({
+  Whisper.ConversationListItemView = Whisper.View.extend({
     tagName: 'div',
     className: 'contact',
 
     events: {
       'click': 'select'
     },
+    template: $('#contact').html(),
     initialize: function() {
-      this.template = $('#contact').html();
-      Mustache.parse(this.template);
-
       this.listenTo(this.model, 'change', this.render); // auto update
       this.listenTo(this.model, 'destroy', this.remove); // auto update
     },

js/views/conversation_view.js

@@ -17,18 +17,18 @@
     'use strict';
     window.Whisper = window.Whisper || {};
 
-    Whisper.ConversationView = Backbone.View.extend({
+    Whisper.ConversationView = Whisper.View.extend({
         className: function() {
             return [ 'conversation', this.model.get('type') ].join(' ');
         },
+        template: $('#conversation').html(),
+        attributes: function() {
+            return { group: this.model.get('type') === 'group' };
+        },
         initialize: function() {
-            this.listenTo(this.model, 'destroy', this.stopListening); // auto update
+            this.listenTo(this.model, 'destroy', this.stopListening);
-            this.template = $('#conversation').html();
-            Mustache.parse(this.template);
 
-            this.$el.html(Mustache.render(this.template,
+            this.render();
-                { group: this.model.get('type') === 'group' }
-            ));
 
             this.fileInput = new Whisper.FileInputView({
                 el: this.$el.find('.attachments')

js/views/key_verification_view.js

@@ -18,12 +18,9 @@
 
     window.Whisper = window.Whisper || {};
 
-    Whisper.KeyVerificationView = Backbone.View.extend({
+    Whisper.KeyVerificationView = Whisper.View.extend({
         className: 'key-verification',
-        initialize: function(options) {
+        template: $('#key-verification').html(),
-            this.template = $('#key-verification').html();
-            Mustache.parse(this.template);
-        },
         events: {
             'click .back': 'goBack'
         },
@@ -37,12 +34,11 @@
 
             });
         },
-        render: function() {
+        attributes: function() {
-            this.$el.html(Mustache.render(this.template, {
+            return {
                 your_key: this.splitKey(this.model.your_key),
                 their_key: this.splitKey(this.model.their_key)
-            }));
+            };
-            return this;
         }
     });
 })();

js/views/message_detail_view.js

@@ -18,11 +18,10 @@
 
     window.Whisper = window.Whisper || {};
 
-    Whisper.MessageDetailView = Backbone.View.extend({
+    Whisper.MessageDetailView = Whisper.View.extend({
         className: 'message-detail',
+        template: $('#message-detail').html(),
         initialize: function(options) {
-            this.template = $('#message-detail').html();
-            Mustache.parse(this.template);
             this.view = new Whisper.MessageView({model: this.model});
             this.conversation = options.conversation;
         },

js/views/message_view.js

@@ -33,12 +33,9 @@
     });
 
 
-    var ContentMessageView = Backbone.View.extend({
+    var ContentMessageView = Whisper.View.extend({
         tagName: 'div',
-        initialize: function() {
+        template: $('#message').html(),
-            this.template = $('#message').html();
-            Mustache.parse(this.template);
-        },
         className: function() {
             if (this.model.get('delivered')) { return 'delivered'; }
         },

js/views/new_conversation_view.js

@@ -30,16 +30,14 @@ var Whisper = Whisper || {};
       model: Whisper.Conversation
   });
 
-  Whisper.ContactPillView = Backbone.View.extend({
+  Whisper.ContactPillView = Whisper.View.extend({
     tagName: 'span',
     className: 'recipient',
     events: {
       'click .remove': 'removeModel'
     },
+    template: $('#contact_pill').html(),
     initialize: function() {
-      this.template = $('#contact_pill').html();
-      Mustache.parse(this.template);
-
       var error = this.model.validate(this.model.attributes);
       if (error) {
         this.$el.addClass('error');
@@ -49,11 +47,8 @@ var Whisper = Whisper || {};
       this.$el.trigger('remove', {modelId: this.model.id});
       this.remove();
     },
-    render: function() {
+    attributes: function() {
-      this.$el.html(
+        return { name: this.model.getTitle() };
-        Mustache.render(this.template, { name: this.model.getTitle() })
-      );
-      return this;
     }
   });
 
@@ -61,12 +56,11 @@ var Whisper = Whisper || {};
     itemView: Whisper.ContactPillView
   });
 
-  Whisper.NewConversationView = Backbone.View.extend({
+  Whisper.NewConversationView = Whisper.View.extend({
     className: 'new-conversation',
+    template: $('#new-conversation').html(),
     initialize: function() {
-        this.template = $('#new-conversation').html();
+        this.render();
-        Mustache.parse(this.template);
-        this.$el.html($(Mustache.render(this.template)));
         this.$group_update = this.$el.find('.new-group-update-form');
         this.$buttons = this.$el.find('.buttons');
         this.$input = this.$el.find('input.new-message');

js/views/new_group_update_view.js

@@ -18,16 +18,13 @@
 
     window.Whisper = window.Whisper || {};
 
-    Whisper.NewGroupUpdateView = Backbone.View.extend({
+    Whisper.NewGroupUpdateView = Whisper.View.extend({
         tagName:   "div",
         className: "new-group-update-form",
+        template: $('#new-group-update-form').html(),
         initialize: function(options) {
             if (this.$el.html().length === 0) {
-                this.template = $('#new-group-update-form').html();
+                this.render();
-                Mustache.parse(this.template);
-                this.$el.html(
-                    Mustache.render(this.template, this.model.attributes)
-                );
             }
             this.avatarInput = new Whisper.FileInputView({
                 el: this.$el.find('.group-avatar')

js/views/phone-input-view.js

@@ -17,12 +17,11 @@ var Whisper = Whisper || {};
 
 (function () {
     'use strict';
-    Whisper.PhoneInputView = Backbone.View.extend({
+    Whisper.PhoneInputView = Whisper.View.extend({
         tagName: 'div',
         className: 'phone-input',
+        template: $('#phone-number').html(),
         initialize: function() {
-            this.template = $('#phone-number').html();
-            Mustache.parse(this.template);
             this.render();
         },
 

js/views/toast_view.js

@@ -17,10 +17,9 @@ var Whisper = Whisper || {};
 
 (function () {
     'use strict';
-    Whisper.ToastView = Backbone.View.extend({
+    Whisper.ToastView = Whisper.View.extend({
         className: 'toast',
         initialize: function() {
-            Mustache.parse(this.template);
             this.$el.hide();
         },
 

js/views/whisper_view.js

@@ -0,0 +1,35 @@
+/* vim: ts=4:sw=4:expandtab
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+(function () {
+    'use strict';
+    window.Whisper = window.Whisper || {};
+
+    Whisper.View = Backbone.View.extend({
+        constructor: function() {
+            Backbone.View.apply(this, arguments);
+            Mustache.parse(_.result(this, 'template'));
+        },
+        attributes: function() {
+            return _.result(this.model, 'attributes', {});
+        },
+        render: function() {
+            var attrs = _.result(this, 'attributes', {});
+            var template = _.result(this, 'template', '');
+            this.$el.html(Mustache.render(template, attrs));
+            return this;
+        }
+    });
+})();

options.html

@@ -102,6 +102,7 @@
   <script type="text/javascript" src="js/models/conversations.js"></script>
 
   <script type="text/javascript" src="js/chromium.js"></script>
+  <script type="text/javascript" src="js/views/whisper_view.js"></script>
   <script type="text/javascript" src="js/views/phone-input-view.js"></script>
   <script type="text/javascript" src="js/options.js"></script>
 </body>

test/index.html

@@ -129,6 +129,7 @@
 
   <script type="text/javascript" src="../js/chromium.js"></script>
 
+  <script type="text/javascript" src="../js/views/whisper_view.js" data-cover></script>
   <script type="text/javascript" src="../js/views/list_view.js" data-cover></script>
   <script type="text/javascript" src="../js/views/group_update_view.js"></script>
   <script type="text/javascript" src="../js/views/attachment_view.js"></script>
@@ -139,6 +140,7 @@
   <script type="text/javascript" src="../js/views/conversation_view.js" data-cover></script>
   <script type="text/javascript" src="../js/views/new_conversation_view.js" data-cover></script>
 
+  <script type="text/javascript" src="views/whisper_view_test.js"></script>
   <script type="text/javascript" src="views/group_update_view_test.js"></script>
   <script type="text/javascript" src="views/message_view_test.js"></script>
   <script type="text/javascript" src="views/list_view_test.js"></script>

test/views/whisper_view_test.js

@@ -0,0 +1,34 @@
+describe('Whisper.View', function() {
+  it('renders a template with attributes', function() {
+    var viewClass = Whisper.View.extend({
+      template: '<div>{{ variable }}</div>',
+      attributes: {
+        variable: 'value'
+      }
+    });
+
+    var view = new viewClass();
+    view.render();
+    assert.strictEqual(view.$el.html(), '<div>value</div>');
+  });
+  it('renders a template with no attributes', function() {
+    var viewClass = Whisper.View.extend({
+      template: '<div>static text</div>'
+    });
+
+    var view = new viewClass();
+    view.render();
+    assert.strictEqual(view.$el.html(), '<div>static text</div>');
+  });
+  it('renders a template function with attributes function', function() {
+    var viewClass = Whisper.View.extend({
+      template: function() { return '<div>{{ variable }}</div>'; },
+      attributes: function() {
+        return { variable: 'value' };
+      }
+    });
+    var view = new viewClass();
+    view.render();
+    assert.strictEqual(view.$el.html(), '<div>value</div>');
+  });
+});