Passing JS Data via JS

Passing the JSON as an element attribute poses problems for escaping quotes. The initial data is now being passed as an actual JavaScript object, removing the need to parse the JSON.

analytics_dashboard/static/js/load/init-models.js

@@ -6,14 +6,14 @@
 define(['jquery', 'models/course-model', 'models/tracking-model', 'models/user-model'],
         function ($, CourseModel, TrackingModel, UserModel) {
     'use strict';
-    var jsonData = JSON.parse($('#content').attr('data-analytics-init')),
-        courseModel = new CourseModel(),
+    var courseModel = new CourseModel(),
         trackingModel = new TrackingModel(),
         userModel = new UserModel();
 
-    courseModel.set(jsonData.course);
-    trackingModel.set(jsonData.tracking);
-    userModel.set(jsonData.user);
+    // initModelData is set by the Django template at render time.
+    courseModel.set(initModelData.course);
+    trackingModel.set(initModelData.tracking);
+    userModel.set(initModelData.user);
 
     return {
         courseModel: courseModel,

analytics_dashboard/templates/base.html

@@ -42,7 +42,7 @@
     <div class="container">
         <div class="row">
           {% block content-outer %}
-            <main class="col-xs-12 main" id="content" data-analytics-init='{{ page_data | safe }}'>
+            <main class="col-xs-12 main" id="content">
                 <div class="view-head">
                     {% block header-text %}<h1>{{ page_title }}</h1>{% endblock %}
                 </div>
@@ -77,6 +77,11 @@
     {# Translation support for JavaScript strings. #}
     <script type="text/javascript" src="{% url 'django.views.i18n.javascript_catalog' %}"></script>
 
+    {# Initial page data passed from view to JS initializer #}
+    <script type="text/javascript">
+      var initModelData = {{ page_data|safe }};
+    </script>
+
     {% compress js %}
       <script src="{% static 'js/common.js' %}"></script>
       <script data-main="{% static 'js/application-main.js' %}"  src="{% static 'vendor/require.js' %}"></script>