Merge pull request #6268 from edx/will/simplify-template-loading

Inline underscore templates; add pre render step

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.
 

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

lms/static/js/verify_student/views/step_view.js

 /**
  * 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.

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>
 <%block name="pagetitle">${messages.page_title}</%block>
 <%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:
         <script type="text/template" id="${template_name}-tpl">
             <%static:include path="verify_student/${template_name}.underscore" />
         </script>