[manual] Fetch Handlebars templates using Ajax

...rather than embedding them into index.html.

This is only acceptable for dev, but the next commit adds an alternative
mechanism for prod.

There isn't actually a manual deployment step here.  However, this commit won't
work on staging / prod without the next one (since we don't serve
zephyr/static/templates in prod).

(imported from commit dce7ddfe89e07afc3a96699bb972fd124335aa05)

zephyr/static/js/invite.js

@@ -11,7 +11,7 @@ function update_subscription_checkboxes() {
     $.each(subs.subscribed_streams(), function (index, value) {
         streams.push({name: value, invite_only: subs.get_invite_only(value)});
     });
-    $('#streams_to_add').html(templates.invite_subscription({streams: streams}));
+    $('#streams_to_add').html(templates.render('invite_subscription', {streams: streams}));
 }
 
 function reset_error_messages() {

zephyr/static/js/message_list.js

@@ -307,7 +307,7 @@ MessageList.prototype = {
             this._message_groups = this._message_groups.concat(new_message_groups);
         }
 
-        var rendered_elems = $(templates.message({
+        var rendered_elems = $(templates.render('message', {
             messages: messages_to_render,
             include_layout_row: (table.find('tr:first').length === 0)
         }));

zephyr/static/js/setup.js

@@ -1,6 +1,5 @@
 // Miscellaneous early setup.
 
-var templates = {};
 var csrf_token;
 $(function () {
     // Display loading indicator.  This disappears after the first
@@ -11,15 +10,6 @@ $(function () {
         util.show_first_run_message();
     }
 
-    // Compile Handlebars templates.
-    $.each(['message', 'subscription',
-            'actions_popover_title', 'actions_popover_content',
-            'invite_subscription', 'new_stream_users'],
-        function (index, name) {
-            templates[name] = Handlebars.compile($('#template_'+name).html());
-        }
-    );
-
     // This requires that we used Django's {% csrf_token %} somewhere on the page.
     csrf_token = $('input[name="csrfmiddlewaretoken"]').attr('value');
 

zephyr/static/js/subs.js

@@ -256,7 +256,8 @@ function settings_for_sub(sub) {
 }
 
 function add_sub_to_table(sub) {
-    $('#create_stream_row').after(templates.subscription({subscriptions: [sub]}));
+    $('#create_stream_row').after(
+        templates.render('subscription', {subscriptions: [sub]}));
     settings_for_sub(sub).collapse('show');
 }
 
@@ -463,7 +464,8 @@ exports.setup_page = function () {
         });
 
         $('#subscriptions_table tr:gt(0)').remove();
-        $('#subscriptions_table').append(templates.subscription({subscriptions: sub_rows}));
+        $('#subscriptions_table').append(
+            templates.render('subscription', {subscriptions: sub_rows}));
 
         util.destroy_loading_indicator($('#subs_page_loading_indicator'));
         $('#create_stream_name').focus().select();
@@ -627,7 +629,7 @@ function show_new_stream_modal() {
         }
     });
 
-    $('#people_to_add').html(templates.new_stream_users({
+    $('#people_to_add').html(templates.render('new_stream_users', {
         users: people_minus_you_and_maybe_humbuggers.sort(people_cmp)
     }));
     $('#stream-creation').modal("show");

zephyr/static/js/templates.js

@@ -0,0 +1,28 @@
+var templates = (function () {
+
+var exports = {};
+
+exports.render = function (name, arg) {
+    if (Handlebars.templates === undefined)
+        Handlebars.templates = {};
+
+    if (Handlebars.templates[name] === undefined) {
+        // Fetch the template using a synchronous AJAX request.
+        //
+        // This is only for local development.  In prod we precompile
+        // templates and serve JavaScript which will have already
+        // populated Handlebars.templates.
+        $.ajax({
+            url:     '/static/templates/'+name+'.handlebars',
+            async:   false,
+            success: function (data) {
+                Handlebars.templates[name] = Handlebars.compile(data);
+            }
+        });
+    }
+
+    return Handlebars.templates[name](arg);
+};
+
+return exports;
+}());

zephyr/static/js/ui.js

@@ -427,8 +427,8 @@ function show_actions_popover(element, id) {
         var ypos = elt.offset().top - viewport.scrollTop();
         elt.popover({
             placement: (ypos > (viewport.height() - 300)) ? 'top' : 'bottom',
-            title:     templates.actions_popover_title(args),
-            content:   templates.actions_popover_content(args),
+            title:     templates.render('actions_popover_title',   args),
+            content:   templates.render('actions_popover_content', args),
             trigger:   "manual"
         });
         elt.popover("show");