MDL-64348 javascript: change template loading to also load dependencies
authorRyan Wyllie <ryan@moodle.com>
Tue, 11 Dec 2018 03:09:32 +0000 (11:09 +0800)
committerRyan Wyllie <ryan@moodle.com>
Mon, 7 Jan 2019 01:03:06 +0000 (09:03 +0800)
Changed the getTemplate function in templates.js to use the
core_output_load_template_with_dependencies function to load the
requested template and all of the dependencies required to render it.

The dependencies are added to the relevant caches so that when the
template is rendered they aren't re-requested from the server.

lib/amd/build/templates.min.js
lib/amd/src/templates.js

index 3357ba4..8d03918 100644 (file)
Binary files a/lib/amd/build/templates.min.js and b/lib/amd/build/templates.min.js differ
index 514f210..091d989 100644 (file)
@@ -98,14 +98,20 @@ define([
         var parts = templateName.split('/');
         var component = parts.shift();
         var name = parts.shift();
-
-        var searchKey = this.currentThemeName + '/' + templateName;
+        var currentTheme = this.currentThemeName;
+        var searchKey = currentTheme + '/' + templateName;
 
         // First try request variables.
         if (searchKey in templatePromises) {
             return templatePromises[searchKey];
         }
 
+        // Check the module template cache.
+        if (searchKey in templateCache) {
+            templatePromises[searchKey] = $.Deferred().resolve(templateCache[searchKey]).promise();
+            return templatePromises[searchKey];
+        }
+
         // Now try local storage.
         var cached = storage.get('core_template/' + searchKey);
 
@@ -117,18 +123,43 @@ define([
 
         // Oh well - load via ajax.
         var promises = ajax.call([{
-            methodname: 'core_output_load_template',
+            methodname: 'core_output_load_template_with_dependencies',
             args: {
                 component: component,
                 template: name,
-                themename: this.currentThemeName
+                themename: currentTheme
             }
         }], true, false);
 
         templatePromises[searchKey] = promises[0].then(
-            function(templateSource) {
-                templateCache[searchKey] = templateSource;
-                storage.set('core_template/' + searchKey, templateSource);
+            function(response) {
+                var templateSource = null;
+
+                response.templates.forEach(function(data) {
+                    // Cache all of the dependent templates because we'll need them to render
+                    // the requested template.
+                    var searchKey = [currentTheme, data.component, data.name].join('/');
+                    templateCache[searchKey] = data.value;
+                    storage.set('core_template/' + searchKey, data.value);
+
+                    if (data.component == component && data.name == name) {
+                        // This is the template that was requested so remember it to return.
+                        templateSource = data.value;
+                    }
+                });
+
+                if (response.strings.length) {
+                    // If we have strings that the template needs then warm the string cache
+                    // with them now so that we don't need to re-fetch them.
+                    str.cache_strings(response.strings.map(function(data) {
+                        return {
+                            component: data.component,
+                            key: data.name,
+                            value: data.value
+                        };
+                    }));
+                }
+
                 return templateSource;
             }
         );