diff --git a/js/views/attachment_preview_view.js b/js/views/attachment_preview_view.js
index d619d3a6a..69f931b59 100644
--- a/js/views/attachment_preview_view.js
+++ b/js/views/attachment_preview_view.js
@@ -7,7 +7,7 @@
 
     Whisper.AttachmentPreviewView = Whisper.View.extend({
         className: 'attachment-preview',
-        template: $('#attachment-preview').html(),
+        templateName: 'attachment-preview',
         render_attributes: function() {
             return {source: this.src};
         }
diff --git a/js/views/confirmation_dialog_view.js b/js/views/confirmation_dialog_view.js
index 4ab39ef84..b6d0116f1 100644
--- a/js/views/confirmation_dialog_view.js
+++ b/js/views/confirmation_dialog_view.js
@@ -7,7 +7,7 @@
 
     Whisper.ConfirmationDialogView = Whisper.View.extend({
         className: 'confirmation-dialog',
-        template: $('#confirmation-dialog').html(),
+        templateName: 'confirmation-dialog',
         initialize: function(options) {
             this.message = options.message;
             this.resolve = options.resolve;
diff --git a/js/views/contact_list_view.js b/js/views/contact_list_view.js
index 15b6683e1..f263b28c0 100644
--- a/js/views/contact_list_view.js
+++ b/js/views/contact_list_view.js
@@ -10,7 +10,7 @@
         itemView: Whisper.View.extend({
             tagName: 'div',
             className: 'contact',
-            template: Whisper.View.Templates.contact,
+            templateName: 'contact',
             render_attributes: function() {
                 return {
                     title: this.model.getTitle(),
diff --git a/js/views/end_session_view.js b/js/views/end_session_view.js
index 23e937c52..63b150b6d 100644
--- a/js/views/end_session_view.js
+++ b/js/views/end_session_view.js
@@ -9,7 +9,7 @@
     Whisper.EndSessionView = Whisper.View.extend({
         tagName:   "div",
         className: "end-session",
-        template: $('#message').html(),
+        templateName: 'message',
         render_attributes: function() {
             return { text: 'Secure session ended' };
         }
diff --git a/js/views/file_input_view.js b/js/views/file_input_view.js
index 4055cd601..dc5e59b8d 100644
--- a/js/views/file_input_view.js
+++ b/js/views/file_input_view.js
@@ -6,7 +6,7 @@
     window.Whisper = window.Whisper || {};
 
     Whisper.FileSizeToast = Whisper.ToastView.extend({
-        template: $('#file-size-modal').html()
+        templateName: 'file-size-modal'
     });
 
     Whisper.FileInputView = Backbone.View.extend({
diff --git a/js/views/group_member_list_view.js b/js/views/group_member_list_view.js
index 97d7e7a52..45fd52c3e 100644
--- a/js/views/group_member_list_view.js
+++ b/js/views/group_member_list_view.js
@@ -7,7 +7,7 @@
 
     Whisper.GroupMemberList = Whisper.View.extend({
         className: 'group-member-list',
-        template: $('#group-member-list').html(),
+        templateName: 'group-member-list',
         initialize: function() {
             this.render();
             this.member_list_view = new Whisper.ContactListView({
diff --git a/js/views/key_conflict_dialogue_view.js b/js/views/key_conflict_dialogue_view.js
index 190c4d346..a2b3d080b 100644
--- a/js/views/key_conflict_dialogue_view.js
+++ b/js/views/key_conflict_dialogue_view.js
@@ -6,11 +6,10 @@
 
     window.Whisper = window.Whisper || {};
 
-    Whisper.KeyConflictDialogueView = Backbone.View.extend({
+    Whisper.KeyConflictDialogueView = Whisper.View.extend({
         className: 'key-conflict-dialogue',
+        templateName: 'key-conflict-dialogue',
         initialize: function(options) {
-            this.template = $('#key-conflict-dialogue').html();
-            Mustache.parse(this.template);
             this.conversation = options.conversation;
         },
         events: {
@@ -32,9 +31,8 @@
             this.remove();
             this.conversation.resolveConflicts(this.model);
         },
-        render: function() {
-            this.$el.html(Mustache.render(this.template, this.model));
-            return this;
+        render_attributes: function() {
+            return this.model;
         }
     });
 })();
diff --git a/js/views/key_verification_view.js b/js/views/key_verification_view.js
index eae511234..23a7a6114 100644
--- a/js/views/key_verification_view.js
+++ b/js/views/key_verification_view.js
@@ -7,7 +7,7 @@
 
     Whisper.KeyVerificationView = Whisper.View.extend({
         className: 'key-verification',
-        template: $('#key-verification').html(),
+        templateName: 'key-verification',
         events: {
             'click .back': 'goBack'
         },
diff --git a/js/views/message_detail_view.js b/js/views/message_detail_view.js
index ee641d3ab..d910c6d44 100644
--- a/js/views/message_detail_view.js
+++ b/js/views/message_detail_view.js
@@ -31,9 +31,9 @@
         }
     });
 
-    Whisper.MessageDetailView = Backbone.View.extend({
+    Whisper.MessageDetailView = Whisper.View.extend({
         className: 'message-detail',
-        template: $('#message-detail').html(),
+        templateName: 'message-detail',
         initialize: function(options) {
             this.view = new Whisper.MessageView({model: this.model});
             this.view.render();
@@ -107,7 +107,7 @@
                 return (e.name === 'OutgoingMessageError' ||
                         e.name === 'SendMessageNetworkError');
             });
-            this.$el.html(Mustache.render(this.template, {
+            this.$el.html(Mustache.render(_.result(this, 'template', ''), {
                 sent_at     : moment(this.model.get('sent_at')).toString(),
                 received_at : moment(this.model.get('received_at')).toString(),
                 tofrom      : this.model.isIncoming() ? 'From' : 'To',
diff --git a/js/views/message_view.js b/js/views/message_view.js
index fed6b39e2..7cf2c7e94 100644
--- a/js/views/message_view.js
+++ b/js/views/message_view.js
@@ -7,7 +7,7 @@
 
     Whisper.MessageView = Whisper.View.extend({
         tagName:   "li",
-        template: $('#message').html(),
+        templateName: 'message',
         initialize: function() {
             this.listenTo(this.model, 'change:errors', this.onErrorsChanged);
             this.listenTo(this.model, 'change:body', this.render);
@@ -73,7 +73,7 @@
         render: function() {
             var contact = this.model.getContact();
             this.$el.html(
-                Mustache.render(this.template, {
+                Mustache.render(_.result(this, 'template', ''), {
                     message: this.model.get('body'),
                     timestamp: this.model.get('sent_at'),
                     sender: (contact && contact.getTitle()) || '',
diff --git a/js/views/phone-input-view.js b/js/views/phone-input-view.js
index 48c981e00..fafc08d87 100644
--- a/js/views/phone-input-view.js
+++ b/js/views/phone-input-view.js
@@ -8,7 +8,7 @@
     Whisper.PhoneInputView = Whisper.View.extend({
         tagName: 'div',
         className: 'phone-input',
-        template: $('#phone-number').html(),
+        templateName: 'phone-number',
         render: function() {
             this.$el.html($(Mustache.render(this.template)));
             this.$('input.number').intlTelInput();
diff --git a/js/views/toast_view.js b/js/views/toast_view.js
index bf5edd0e4..f32adc4e1 100644
--- a/js/views/toast_view.js
+++ b/js/views/toast_view.js
@@ -16,7 +16,7 @@
         },
 
         render: function() {
-            this.$el.html(Mustache.render(this.template, this.model));
+            this.$el.html(Mustache.render(_.result(this, 'template', ''), this.model));
             this.$el.show();
             setTimeout(this.close.bind(this), 2000);
         }