Merge pull request #9239 from edx/andya/lms-performance-fixes

Separate out the Backbone image field

lms/static/js/spec/student_account/account_settings_factory_spec.js

@@ -59,11 +59,6 @@ define(['backbone', 'jquery', 'underscore', 'common/js/spec_helpers/ajax_helpers
 
             beforeEach(function () {
                 setFixtures('<div class="wrapper-account-settings"></div>');
-                TemplateHelpers.installTemplate('templates/fields/field_readonly');
-                TemplateHelpers.installTemplate('templates/fields/field_dropdown');
-                TemplateHelpers.installTemplate('templates/fields/field_link');
-                TemplateHelpers.installTemplate('templates/fields/field_text');
-                TemplateHelpers.installTemplate('templates/student_account/account_settings');
             });
 
             it("shows loading error when UserAccountModel fails to load", function() {

lms/static/js/spec/student_account/account_settings_fields_spec.js

@@ -15,11 +15,6 @@ define(['backbone', 'jquery', 'underscore', 'common/js/spec_helpers/ajax_helpers
                 timerCallback;
 
             beforeEach(function () {
-                TemplateHelpers.installTemplate('templates/fields/field_readonly');
-                TemplateHelpers.installTemplate('templates/fields/field_dropdown');
-                TemplateHelpers.installTemplate('templates/fields/field_link');
-                TemplateHelpers.installTemplate('templates/fields/field_text');
-
                 timerCallback = jasmine.createSpy('timerCallback');
                 jasmine.Clock.useMock();
             });

lms/static/js/spec/student_account/account_settings_view_spec.js

@@ -61,11 +61,6 @@ define(['backbone', 'jquery', 'underscore', 'common/js/spec_helpers/ajax_helpers
 
             beforeEach(function () {
                 setFixtures('<div class="wrapper-account-settings"></div>');
-                TemplateHelpers.installTemplate('templates/fields/field_readonly');
-                TemplateHelpers.installTemplate('templates/fields/field_dropdown');
-                TemplateHelpers.installTemplate('templates/fields/field_link');
-                TemplateHelpers.installTemplate('templates/fields/field_text');
-                TemplateHelpers.installTemplate('templates/student_account/account_settings');
             });
 
             it("shows loading error correctly", function() {

lms/static/js/spec/student_profile/learner_profile_factory_spec.js

-define(['backbone', 'jquery', 'underscore', 'common/js/spec_helpers/ajax_helpers', 'common/js/spec_helpers/template_helpers',
+define(['backbone', 'jquery', 'underscore', 'common/js/spec_helpers/ajax_helpers',
+        'common/js/spec_helpers/template_helpers',
         'js/spec/student_account/helpers',
         'js/spec/student_profile/helpers',
         'js/views/fields',
@@ -19,12 +20,6 @@ define(['backbone', 'jquery', 'underscore', 'common/js/spec_helpers/ajax_helpers
 
             beforeEach(function () {
                 loadFixtures('js/fixtures/student_profile/student_profile.html');
-                TemplateHelpers.installTemplate('templates/fields/field_readonly');
-                TemplateHelpers.installTemplate('templates/fields/field_dropdown');
-                TemplateHelpers.installTemplate('templates/fields/field_textarea');
-                TemplateHelpers.installTemplate('templates/fields/field_image');
-                TemplateHelpers.installTemplate('templates/fields/message_banner');
-                TemplateHelpers.installTemplate('templates/student_profile/learner_profile');
             });
 
             var createProfilePage = function(ownProfile, options) {

lms/static/js/spec/student_profile/learner_profile_view_spec.js

@@ -123,12 +123,6 @@ define(['backbone', 'jquery', 'underscore', 'common/js/spec_helpers/ajax_helpers
 
             beforeEach(function () {
                 loadFixtures('js/fixtures/student_profile/student_profile.html');
-                TemplateHelpers.installTemplate('templates/fields/field_readonly');
-                TemplateHelpers.installTemplate('templates/fields/field_dropdown');
-                TemplateHelpers.installTemplate('templates/fields/field_textarea');
-                TemplateHelpers.installTemplate('templates/fields/field_image');
-                TemplateHelpers.installTemplate('templates/fields/message_banner');
-                TemplateHelpers.installTemplate('templates/student_profile/learner_profile');
             });
 
             it("shows loading error correctly", function() {

lms/static/js/spec/views/fields_spec.js

-define(['backbone', 'jquery', 'underscore', 'common/js/spec_helpers/ajax_helpers', 'common/js/spec_helpers/template_helpers',
-        'js/views/fields',
-        'js/spec/views/fields_helpers',
+define(['backbone', 'jquery', 'underscore', 'common/js/spec_helpers/ajax_helpers',
+        'common/js/spec_helpers/template_helpers', 'js/views/fields', 'js/spec/views/fields_helpers',
         'string_utils'],
     function (Backbone, $, _, AjaxHelpers, TemplateHelpers, FieldViews, FieldViewsSpecHelpers) {
         'use strict';
@@ -19,16 +18,9 @@ define(['backbone', 'jquery', 'underscore', 'common/js/spec_helpers/ajax_helpers
                 FieldViews.DropdownFieldView,
                 FieldViews.LinkFieldView,
                 FieldViews.TextareaFieldView
-
             ];
 
             beforeEach(function () {
-                TemplateHelpers.installTemplate('templates/fields/field_readonly');
-                TemplateHelpers.installTemplate('templates/fields/field_dropdown');
-                TemplateHelpers.installTemplate('templates/fields/field_link');
-                TemplateHelpers.installTemplate('templates/fields/field_text');
-                TemplateHelpers.installTemplate('templates/fields/field_textarea');
-
                 timerCallback = jasmine.createSpy('timerCallback');
                 jasmine.Clock.useMock();
             });

lms/static/js/student_account/views/account_settings_view.js

 ;(function (define, undefined) {
     'use strict';
     define([
-        'gettext', 'jquery', 'underscore', 'backbone'
-    ], function (gettext, $, _, Backbone) {
+        'gettext', 'jquery', 'underscore', 'backbone', 'text!templates/student_account/account_settings.underscore'
+    ], function (gettext, $, _, Backbone, accountSettingsTemplate) {
 
         var AccountSettingsView = Backbone.View.extend({
 
             initialize: function () {
-                this.template = _.template($('#account_settings-tpl').text());
                 _.bindAll(this, 'render', 'renderFields', 'showLoadingError');
             },
 
             render: function () {
-                this.$el.html(this.template({
+                this.$el.html(_.template(accountSettingsTemplate, {
                     sections: this.options.sectionsData
                 }));
                 return this;

lms/static/js/student_profile/views/learner_profile_fields.js

 ;(function (define, undefined) {
     'use strict';
     define([
-        'gettext', 'jquery', 'underscore', 'backbone', 'js/views/fields', 'backbone-super'
-    ], function (gettext, $, _, Backbone, FieldViews) {
+        'gettext', 'jquery', 'underscore', 'backbone', 'js/views/fields', 'js/views/image_field', 'backbone-super'
+    ], function (gettext, $, _, Backbone, FieldViews, ImageFieldView) {
 
         var LearnerProfileFieldViews = {};
 
@@ -42,7 +42,7 @@
             }
         });
 
-        LearnerProfileFieldViews.ProfileImageFieldView = FieldViews.ImageFieldView.extend({
+        LearnerProfileFieldViews.ProfileImageFieldView = ImageFieldView.extend({
 
             screenReaderTitle: gettext('Profile Image'),
 

lms/static/js/student_profile/views/learner_profile_view.js

 ;(function (define, undefined) {
     'use strict';
     define([
-        'gettext', 'jquery', 'underscore', 'backbone'
-    ], function (gettext, $, _, Backbone) {
+        'gettext', 'jquery', 'underscore', 'backbone', 'text!templates/student_profile/learner_profile.underscore'],
+        function (gettext, $, _, Backbone, learnerProfileTemplate) {
 
         var LearnerProfileView = Backbone.View.extend({
 
             initialize: function () {
-                this.template = _.template($('#learner_profile-tpl').text());
                 _.bindAll(this, 'showFullProfile', 'render', 'renderFields', 'showLoadingError');
                 this.listenTo(this.options.preferencesModel, "change:" + 'account_privacy', this.render);
             },
@@ -22,7 +21,7 @@
             },
 
             render: function () {
-                this.$el.html(this.template({
+                this.$el.html(_.template(learnerProfileTemplate, {
                     username: this.options.accountSettingsModel.get('username'),
                     ownProfile: this.options.ownProfile,
                     showFullProfile: this.showFullProfile()

lms/static/js/views/fields.js

@@ -7,15 +7,13 @@
         'text!templates/fields/field_link.underscore',
         'text!templates/fields/field_text.underscore',
         'text!templates/fields/field_textarea.underscore',
-        'text!templates/fields/field_image.underscore',
-        'backbone-super', 'jquery.fileupload'
+        'backbone-super'
     ], function (gettext, $, _, Backbone,
                  field_readonly_template,
                  field_dropdown_template,
                  field_link_template,
                  field_text_template,
-                 field_textarea_template,
-                 field_image_template
+                 field_textarea_template
     ) {
 
         var messageRevertDelay = 6000;
@@ -577,225 +575,6 @@
             }
         });
 
-        FieldViews.ImageFieldView = FieldViews.FieldView.extend({
-
-            fieldType: 'image',
-
-            fieldTemplate: field_image_template,
-            uploadButtonSelector: '.upload-button-input',
-
-            titleAdd: gettext("Upload an image"),
-            titleEdit: gettext("Change image"),
-            titleRemove: gettext("Remove"),
-
-            titleUploading: gettext("Uploading"),
-            titleRemoving: gettext("Removing"),
-
-            titleImageAlt: '',
-            screenReaderTitle: gettext("Image"),
-
-            iconUpload: '<i class="icon fa fa-camera" aria-hidden="true"></i>',
-            iconRemove: '<i class="icon fa fa-remove" aria-hidden="true"></i>',
-            iconProgress: '<i class="icon fa fa-spinner fa-pulse fa-spin" aria-hidden="true"></i>',
-
-            errorMessage: gettext("An error has occurred. Refresh the page, and then try again."),
-
-            events: {
-                'click .u-field-upload-button': 'clickedUploadButton',
-                'click .u-field-remove-button': 'clickedRemoveButton',
-                'click .upload-submit': 'clickedUploadButton',
-                'focus .upload-button-input': 'showHoverState',
-                'blur .upload-button-input': 'hideHoverState'
-            },
-
-            initialize: function (options) {
-                this._super(options);
-                _.bindAll(this, 'render', 'imageChangeSucceeded', 'imageChangeFailed', 'fileSelected',
-                          'watchForPageUnload', 'onBeforeUnload');
-            },
-
-            render: function () {
-                this.$el.html(this.template({
-                    id: this.options.valueAttribute,
-                    inputName: (this.options.inputName || 'file'),
-                    imageUrl: _.result(this, 'imageUrl'),
-                    imageAltText: _.result(this, 'imageAltText'),
-                    uploadButtonIcon: _.result(this, 'iconUpload'),
-                    uploadButtonTitle: _.result(this, 'uploadButtonTitle'),
-                    removeButtonIcon: _.result(this, 'iconRemove'),
-                    removeButtonTitle: _.result(this, 'removeButtonTitle'),
-                    screenReaderTitle: _.result(this, 'screenReaderTitle')
-                }));
-                this.delegateEvents();
-                this.updateButtonsVisibility();
-                this.watchForPageUnload();
-                return this;
-            },
-
-            showHoverState: function () {
-                this.$('.u-field-upload-button').addClass('button-visible');
-            },
-
-            hideHoverState: function () {
-                this.$('.u-field-upload-button').removeClass('button-visible');
-            },
-
-            showErrorMessage: function (message) {
-                return message;
-            },
-
-            imageUrl: function () {
-                return '';
-            },
-
-            uploadButtonTitle: function () {
-                if (this.isShowingPlaceholder()) {
-                    return _.result(this, 'titleAdd');
-                } else {
-                    return _.result(this, 'titleEdit');
-                }
-            },
-
-            removeButtonTitle: function () {
-                return this.titleRemove;
-            },
-
-            isEditingAllowed: function () {
-                return true;
-            },
-
-            isShowingPlaceholder: function () {
-                return false;
-            },
-
-            setUploadButtonVisibility: function (state) {
-                this.$('.u-field-upload-button').css('display', state);
-            },
-
-            setRemoveButtonVisibility: function (state) {
-                this.$('.u-field-remove-button').css('display', state);
-            },
-
-            updateButtonsVisibility: function () {
-                if (!this.isEditingAllowed() || !this.options.editable) {
-                    this.setUploadButtonVisibility('none');
-                }
-
-                if (this.isShowingPlaceholder() || !this.options.editable) {
-                    this.setRemoveButtonVisibility('none');
-                }
-            },
-
-            clickedUploadButton: function () {
-                $(this.uploadButtonSelector).fileupload({
-                    url: this.options.imageUploadUrl,
-                    type: 'POST',
-                    add: this.fileSelected,
-                    done: this.imageChangeSucceeded,
-                    fail: this.imageChangeFailed
-                });
-            },
-
-            clickedRemoveButton: function () {
-                var view = this;
-                this.setCurrentStatus('removing');
-                this.setUploadButtonVisibility('none');
-                this.showRemovalInProgressMessage();
-                $.ajax({
-                    type: 'POST',
-                    url: this.options.imageRemoveUrl
-                }).done(function () {
-                    view.imageChangeSucceeded();
-                }).fail(function (jqXHR) {
-                    view.showImageChangeFailedMessage(jqXHR.status, jqXHR.responseText);
-                });
-            },
-
-            imageChangeSucceeded: function () {
-                this.render();
-            },
-
-            imageChangeFailed: function (e, data) {
-            },
-
-            showImageChangeFailedMessage: function (status, responseText) {
-            },
-
-            fileSelected: function (e, data) {
-                if (_.isUndefined(data.files[0].size) || this.validateImageSize(data.files[0].size)) {
-                    this.setCurrentStatus('uploading');
-                    this.setRemoveButtonVisibility('none');
-                    this.showUploadInProgressMessage();
-                    data.submit();
-                }
-            },
-
-            validateImageSize: function (imageBytes) {
-                var humanReadableSize;
-                if (imageBytes < this.options.imageMinBytes) {
-                    humanReadableSize = this.bytesToHumanReadable(this.options.imageMinBytes);
-                    this.showErrorMessage(
-                        interpolate_text(
-                            gettext("The file must be at least {size} in size."), {size: humanReadableSize}
-                        )
-                    );
-                    return false;
-                } else if (imageBytes > this.options.imageMaxBytes) {
-                    humanReadableSize = this.bytesToHumanReadable(this.options.imageMaxBytes);
-                    this.showErrorMessage(
-                        interpolate_text(
-                            gettext("The file must be smaller than {size} in size."), {size: humanReadableSize}
-                        )
-                    );
-                    return false;
-                }
-                return true;
-            },
-
-            showUploadInProgressMessage: function () {
-                this.$('.u-field-upload-button').css('opacity', 1);
-                this.$('.upload-button-icon').html(this.iconProgress);
-                this.$('.upload-button-title').html(this.titleUploading);
-            },
-
-            showRemovalInProgressMessage: function () {
-                this.$('.u-field-remove-button').css('opacity', 1);
-                this.$('.remove-button-icon').html(this.iconProgress);
-                this.$('.remove-button-title').html(this.titleRemoving);
-            },
-
-            setCurrentStatus: function (status) {
-                this.$('.image-wrapper').attr('data-status', status);
-            },
-
-            getCurrentStatus: function () {
-                return this.$('.image-wrapper').attr('data-status');
-            },
-
-            watchForPageUnload: function () {
-                $(window).on('beforeunload', this.onBeforeUnload);
-            },
-
-            onBeforeUnload: function () {
-                var status = this.getCurrentStatus();
-                if (status === 'uploading') {
-                    return gettext("Upload is in progress. To avoid errors, stay on this page until the process is complete.");
-                } else if (status === 'removing') {
-                    return gettext("Removal is in progress. To avoid errors, stay on this page until the process is complete.");
-                }
-            },
-
-            bytesToHumanReadable: function (size) {
-                var units = [gettext('bytes'), gettext('KB'), gettext('MB')];
-                var i = 0;
-                while(size >= 1024) {
-                    size /= 1024;
-                    ++i;
-                }
-                return size.toFixed(1)*1 + ' ' + units[i];
-            }
-        });
-
         return FieldViews;
     });
 }).call(this, define || RequireJS.define);

lms/static/js/views/image_field.js

+;(function (define) {
+    'use strict';
+    define([
+        'gettext', 'jquery', 'underscore', 'backbone', 'js/views/fields',
+        'text!templates/fields/field_image.underscore',
+        'backbone-super', 'jquery.fileupload'
+    ], function (gettext, $, _, Backbone, FieldViews, field_image_template) {
+
+        var ImageFieldView = FieldViews.FieldView.extend({
+
+            fieldType: 'image',
+
+            fieldTemplate: field_image_template,
+            uploadButtonSelector: '.upload-button-input',
+
+            titleAdd: gettext("Upload an image"),
+            titleEdit: gettext("Change image"),
+            titleRemove: gettext("Remove"),
+
+            titleUploading: gettext("Uploading"),
+            titleRemoving: gettext("Removing"),
+
+            titleImageAlt: '',
+            screenReaderTitle: gettext("Image"),
+
+            iconUpload: '<i class="icon fa fa-camera" aria-hidden="true"></i>',
+            iconRemove: '<i class="icon fa fa-remove" aria-hidden="true"></i>',
+            iconProgress: '<i class="icon fa fa-spinner fa-pulse fa-spin" aria-hidden="true"></i>',
+
+            errorMessage: gettext("An error has occurred. Refresh the page, and then try again."),
+
+            events: {
+                'click .u-field-upload-button': 'clickedUploadButton',
+                'click .u-field-remove-button': 'clickedRemoveButton',
+                'click .upload-submit': 'clickedUploadButton',
+                'focus .upload-button-input': 'showHoverState',
+                'blur .upload-button-input': 'hideHoverState'
+            },
+
+            initialize: function (options) {
+                this._super(options);
+                _.bindAll(this, 'render', 'imageChangeSucceeded', 'imageChangeFailed', 'fileSelected',
+                          'watchForPageUnload', 'onBeforeUnload');
+            },
+
+            render: function () {
+                this.$el.html(this.template({
+                    id: this.options.valueAttribute,
+                    inputName: (this.options.inputName || 'file'),
+                    imageUrl: _.result(this, 'imageUrl'),
+                    imageAltText: _.result(this, 'imageAltText'),
+                    uploadButtonIcon: _.result(this, 'iconUpload'),
+                    uploadButtonTitle: _.result(this, 'uploadButtonTitle'),
+                    removeButtonIcon: _.result(this, 'iconRemove'),
+                    removeButtonTitle: _.result(this, 'removeButtonTitle'),
+                    screenReaderTitle: _.result(this, 'screenReaderTitle')
+                }));
+                this.delegateEvents();
+                this.updateButtonsVisibility();
+                this.watchForPageUnload();
+                return this;
+            },
+
+            showHoverState: function () {
+                this.$('.u-field-upload-button').addClass('button-visible');
+            },
+
+            hideHoverState: function () {
+                this.$('.u-field-upload-button').removeClass('button-visible');
+            },
+
+            showErrorMessage: function (message) {
+                return message;
+            },
+
+            imageUrl: function () {
+                return '';
+            },
+
+            uploadButtonTitle: function () {
+                if (this.isShowingPlaceholder()) {
+                    return _.result(this, 'titleAdd');
+                } else {
+                    return _.result(this, 'titleEdit');
+                }
+            },
+
+            removeButtonTitle: function () {
+                return this.titleRemove;
+            },
+
+            isEditingAllowed: function () {
+                return true;
+            },
+
+            isShowingPlaceholder: function () {
+                return false;
+            },
+
+            setUploadButtonVisibility: function (state) {
+                this.$('.u-field-upload-button').css('display', state);
+            },
+
+            setRemoveButtonVisibility: function (state) {
+                this.$('.u-field-remove-button').css('display', state);
+            },
+
+            updateButtonsVisibility: function () {
+                if (!this.isEditingAllowed() || !this.options.editable) {
+                    this.setUploadButtonVisibility('none');
+                }
+
+                if (this.isShowingPlaceholder() || !this.options.editable) {
+                    this.setRemoveButtonVisibility('none');
+                }
+            },
+
+            clickedUploadButton: function () {
+                $(this.uploadButtonSelector).fileupload({
+                    url: this.options.imageUploadUrl,
+                    type: 'POST',
+                    add: this.fileSelected,
+                    done: this.imageChangeSucceeded,
+                    fail: this.imageChangeFailed
+                });
+            },
+
+            clickedRemoveButton: function () {
+                var view = this;
+                this.setCurrentStatus('removing');
+                this.setUploadButtonVisibility('none');
+                this.showRemovalInProgressMessage();
+                $.ajax({
+                    type: 'POST',
+                    url: this.options.imageRemoveUrl
+                }).done(function () {
+                    view.imageChangeSucceeded();
+                }).fail(function (jqXHR) {
+                    view.showImageChangeFailedMessage(jqXHR.status, jqXHR.responseText);
+                });
+            },
+
+            imageChangeSucceeded: function () {
+                this.render();
+            },
+
+            imageChangeFailed: function (e, data) {
+            },
+
+            showImageChangeFailedMessage: function (status, responseText) {
+            },
+
+            fileSelected: function (e, data) {
+                if (_.isUndefined(data.files[0].size) || this.validateImageSize(data.files[0].size)) {
+                    this.setCurrentStatus('uploading');
+                    this.setRemoveButtonVisibility('none');
+                    this.showUploadInProgressMessage();
+                    data.submit();
+                }
+            },
+
+            validateImageSize: function (imageBytes) {
+                var humanReadableSize;
+                if (imageBytes < this.options.imageMinBytes) {
+                    humanReadableSize = this.bytesToHumanReadable(this.options.imageMinBytes);
+                    this.showErrorMessage(
+                        interpolate_text(
+                            gettext("The file must be at least {size} in size."), {size: humanReadableSize}
+                        )
+                    );
+                    return false;
+                } else if (imageBytes > this.options.imageMaxBytes) {
+                    humanReadableSize = this.bytesToHumanReadable(this.options.imageMaxBytes);
+                    this.showErrorMessage(
+                        interpolate_text(
+                            gettext("The file must be smaller than {size} in size."), {size: humanReadableSize}
+                        )
+                    );
+                    return false;
+                }
+                return true;
+            },
+
+            showUploadInProgressMessage: function () {
+                this.$('.u-field-upload-button').css('opacity', 1);
+                this.$('.upload-button-icon').html(this.iconProgress);
+                this.$('.upload-button-title').html(this.titleUploading);
+            },
+
+            showRemovalInProgressMessage: function () {
+                this.$('.u-field-remove-button').css('opacity', 1);
+                this.$('.remove-button-icon').html(this.iconProgress);
+                this.$('.remove-button-title').html(this.titleRemoving);
+            },
+
+            setCurrentStatus: function (status) {
+                this.$('.image-wrapper').attr('data-status', status);
+            },
+
+            getCurrentStatus: function () {
+                return this.$('.image-wrapper').attr('data-status');
+            },
+
+            watchForPageUnload: function () {
+                $(window).on('beforeunload', this.onBeforeUnload);
+            },
+
+            onBeforeUnload: function () {
+                var status = this.getCurrentStatus();
+                if (status === 'uploading') {
+                    return gettext("Upload is in progress. To avoid errors, stay on this page until the process is complete.");
+                } else if (status === 'removing') {
+                    return gettext("Removal is in progress. To avoid errors, stay on this page until the process is complete.");
+                }
+            },
+
+            bytesToHumanReadable: function (size) {
+                var units = [gettext('bytes'), gettext('KB'), gettext('MB')];
+                var i = 0;
+                while(size >= 1024) {
+                    size /= 1024;
+                    ++i;
+                }
+                return size.toFixed(1)*1 + ' ' + units[i];
+            }
+        });
+
+        return ImageFieldView;
+    });
+}).call(this, define || RequireJS.define);

lms/static/js/views/message_banner.js

 ;(function (define, undefined) {
     'use strict';
     define([
-        'gettext', 'jquery', 'underscore', 'backbone'
-    ], function (gettext, $, _, Backbone) {
+        'gettext', 'jquery', 'underscore', 'backbone', 'text!templates/fields/message_banner.underscore'
+    ], function (gettext, $, _, Backbone, messageBannerTemplate) {
 
         var MessageBannerView = Backbone.View.extend({
 
@@ -11,14 +11,13 @@
                     options = {};
                 }
                 this.options = _.defaults(options, {urgency: 'high', type: ''});
-                this.template = _.template($('#message_banner-tpl').text());
             },
 
             render: function () {
                 if (_.isUndefined(this.message) || _.isNull(this.message)) {
                     this.$el.html('');
                 } else {
-                    this.$el.html(this.template(_.extend(this.options, {
+                    this.$el.html(_.template(messageBannerTemplate, _.extend(this.options, {
                         message: this.message
                     })));
                 }

lms/templates/dashboard.html

@@ -25,9 +25,6 @@ import json
 <script type="text/template" id="${template_name}-tpl">
   <%static:include path="dashboard/${template_name}.underscore" />
 </script>
-<script type="text/template" id="message_banner-tpl">
-  <%static:include path="fields/message_banner.underscore" />
-</script>
 % endfor
 
 % for template_name in ["dashboard_search_item", "dashboard_search_results", "search_loading", "search_error"]:

lms/templates/student_account/account_settings.html

@@ -14,19 +14,6 @@ from microsite_configuration import microsite
 <%block name="pagetitle">${_("Account Settings")}</%block>
 <%block name="nav_skip">#u-field-input-username</%block>
 
-<%block name="header_extras">
-
-    <script type="text/template" id="account_settings-tpl">
-        <%static:include path="student_account/account_settings.underscore" />
-    </script>
-
-    % for template_name in ["field_dropdown", "field_link", "field_readonly", "field_text"]:
-        <script type="text/template" id="${template_name}-tpl">
-            <%static:include path="fields/${template_name}.underscore" />
-        </script>
-    % endfor
-</%block>
-
 % if duplicate_provider:
     <section>
         <%include file='/dashboard/_dashboard_third_party_error.html' />

lms/templates/student_profile/learner_profile.html

@@ -12,20 +12,6 @@ from openedx.core.lib.json_utils import EscapedEdxJSONEncoder
 
 <%block name="bodyclass">view-profile</%block>
 
-<%block name="header_extras">
-    % for template_name in ["field_dropdown", "field_image", "field_textarea", "field_readonly", "message_banner"]:
-        <script type="text/template" id="${template_name}-tpl">
-            <%static:include path="fields/${template_name}.underscore" />
-        </script>
-    % endfor
-
-    % for template_name in ["learner_profile"]:
-        <script type="text/template" id="${template_name}-tpl">
-            <%static:include path="student_profile/${template_name}.underscore" />
-        </script>
-    % endfor
-</%block>
-
 <div class="message-banner" aria-live="polite"></div>
 <div class="wrapper-profile">
     <div class="ui-loading-indicator">