From 77caa633217d48566e1ba3d4dad2e2b762cdcded Mon Sep 17 00:00:00 2001 From: lilia Date: Tue, 8 Dec 2015 15:01:29 -0800 Subject: [PATCH] Normalize views' template fetching pattern Typically, a view can specify its templateName and then use the default render method on Whisper.View, except in some special cases like message view or message detail where other operations are performed during render. // FREEBIE --- js/views/attachment_preview_view.js | 2 +- js/views/confirmation_dialog_view.js | 2 +- js/views/contact_list_view.js | 2 +- js/views/end_session_view.js | 2 +- js/views/file_input_view.js | 2 +- js/views/group_member_list_view.js | 2 +- js/views/key_conflict_dialogue_view.js | 10 ++++------ js/views/key_verification_view.js | 2 +- js/views/message_detail_view.js | 6 +++--- js/views/message_view.js | 4 ++-- js/views/phone-input-view.js | 2 +- js/views/toast_view.js | 2 +- 12 files changed, 18 insertions(+), 20 deletions(-) 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); }