diff --git a/lms/djangoapps/verify_student/views.py b/lms/djangoapps/verify_student/views.py index e07c329b36..012fa047b5 100644 --- a/lms/djangoapps/verify_student/views.py +++ b/lms/djangoapps/verify_student/views.py @@ -25,8 +25,6 @@ from django.utils.decorators import method_decorator from django.utils.translation import ugettext as _, ugettext_lazy from django.contrib.auth.decorators import login_required -from staticfiles.storage import staticfiles_storage - from openedx.core.djangoapps.user_api.api import profile as profile_api from course_modes.models import CourseMode @@ -270,31 +268,31 @@ class PayAndVerifyView(View): STEP_INFO = { INTRO_STEP: Step( title=ugettext_lazy("Intro"), - template_name="verify_student/intro_step.underscore" + template_name="intro_step" ), MAKE_PAYMENT_STEP: Step( title=ugettext_lazy("Make Payment"), - template_name="verify_student/make_payment_step.underscore" + template_name="make_payment_step" ), PAYMENT_CONFIRMATION_STEP: Step( title=ugettext_lazy("Payment Confirmation"), - template_name="verify_student/payment_confirmation_step.underscore" + template_name="payment_confirmation_step" ), FACE_PHOTO_STEP: Step( title=ugettext_lazy("Take Face Photo"), - template_name="verify_student/face_photo_step.underscore" + template_name="face_photo_step" ), ID_PHOTO_STEP: Step( title=ugettext_lazy("ID Photo"), - template_name="verify_student/id_photo_step.underscore" + template_name="id_photo_step" ), REVIEW_PHOTOS_STEP: Step( title=ugettext_lazy("Review Photos"), - template_name="verify_student/review_photos_step.underscore" + template_name="review_photos_step" ), ENROLLMENT_CONFIRMATION_STEP: Step( title=ugettext_lazy("Enrollment Confirmation"), - template_name="verify_student/enrollment_confirmation_step.underscore" + template_name="enrollment_confirmation_step" ), } @@ -607,34 +605,12 @@ class PayAndVerifyView(View): { 'name': step, 'title': unicode(self.STEP_INFO[step].title), - 'templateUrl': self._template_url(self.STEP_INFO[step].template_name) + 'templateName': self.STEP_INFO[step].template_name } for step in display_steps if step not in remove_steps ] - def _template_url(self, template_name): - """Determine the path to a template. - - This uses staticfiles, so the path will include MD5 - hashes when used in production. This is really important, - because otherwise the JavaScript won't be able to find - the templates! - - Arguments: - template_name (str): The name of the template, relative - to the "static/templates" directory. - - Returns: - string - - """ - template_path = u"templates/{name}".format(name=template_name) - return ( - staticfiles_storage.url(template_path) - if template_name is not None else "" - ) - def _requirements(self, display_steps): """Determine which requirements to show the user. diff --git a/lms/static/js/verify_student/views/pay_and_verify_view.js b/lms/static/js/verify_student/views/pay_and_verify_view.js index 3baea6c107..2b78894718 100644 --- a/lms/static/js/verify_student/views/pay_and_verify_view.js +++ b/lms/static/js/verify_student/views/pay_and_verify_view.js @@ -96,7 +96,7 @@ var edx = edx || {}; subviewConfig = { errorModel: this.errorModel, - templateUrl: this.displaySteps[i].templateUrl, + templateName: this.displaySteps[i].templateName, nextStepNum: (i + 2), // Next index, starting from 1 nextStepTitle: nextStepTitle, stepData: stepData diff --git a/lms/static/js/verify_student/views/step_view.js b/lms/static/js/verify_student/views/step_view.js index b856ee47df..5371a10c01 100644 --- a/lms/static/js/verify_student/views/step_view.js +++ b/lms/static/js/verify_student/views/step_view.js @@ -1,19 +1,10 @@ /** * Base view for defining steps in the payment/verification flow. * - * Each step view lazy-loads its underscore template. - * This reduces the size of the initial page, since we don't - * need to include the DOM structure for each step - * in the initial load. - * * Step subclasses are responsible for defining a template * and installing custom event handlers (including buttons * to move to the next step). * - * The superclass is responsible for downloading the underscore - * template and rendering it, using context received from - * the server (in data attributes on the initial page load). - * */ var edx = edx || {}; @@ -35,18 +26,27 @@ }, render: function() { - if ( !this.renderedHtml && this.templateUrl) { - $.ajax({ - url: this.templateUrl, - type: 'GET', - context: this, - success: this.handleResponse, - error: this.handleError - }); - } else { - $( this.el ).html( this.renderedHtml ); - this.postRender(); - } + var templateHtml = $( "#" + this.templateName + "-tpl" ).html(), + templateContext = { + nextStepNum: this.nextStepNum, + nextStepTitle: this.nextStepTitle + }; + + // Include step-specific information from the server + // (passed in from data- attributes to the parent view) + _.extend( templateContext, this.stepData ); + + // Allow subclasses to add additional information + // to the template context, perhaps asynchronously. + this.updateContext( templateContext ).done( + function( templateContext ) { + // Render the template into the DOM + $( this.el ).html( _.template( templateHtml, templateContext ) ); + + // Allow subclasses to install custom event handlers + this.postRender(); + } + ).fail( _.bind( this.handleError, this ) ); }, handleResponse: function( data ) { @@ -66,12 +66,28 @@ handleError: function() { this.errorModel.set({ - errorTitle: gettext("Error"), - errorMsg: gettext("An unexpected error occurred. Please reload the page to try again."), + errorTitle: gettext( "Error" ), + errorMsg: gettext( "An unexpected error occurred. Please reload the page to try again." ), shown: true }); }, + /** + * Subclasses can override this to add information to + * the template context. This returns an asynchronous + * Promise, so the subclass can fill in the template + * after completing an AJAX request. + * The default implementation is a no-op. + */ + updateContext: function( templateContext ) { + var view = this; + return $.Deferred( + function( defer ) { + defer.resolveWith( view, [ templateContext ]); + } + ).promise(); + }, + postRender: function() { // Sub-classes can override this method // to install custom event handlers. diff --git a/lms/templates/verify_student/pay_and_verify.html b/lms/templates/verify_student/pay_and_verify.html index 63d5e07bfd..227d1d0152 100644 --- a/lms/templates/verify_student/pay_and_verify.html +++ b/lms/templates/verify_student/pay_and_verify.html @@ -9,7 +9,13 @@ from verify_student.views import PayAndVerifyView <%block name="bodyclass">register verification-process step-requirements <%block name="pagetitle">${messages.page_title} <%block name="header_extras"> - % for template_name in ["progress", "requirements", "webcam_photo", "error"]: + <% + template_names = ( + ["progress", "requirements", "webcam_photo", "error"] + + [step['templateName'] for step in display_steps] + ) + %> + % for template_name in template_names: