MAGETWO-81980: Add after render callback

- add after render callback to know when knockout finished rendering

Author: Igor Melnikov

app/code/Magento/Ui/view/base/web/js/lib/knockout/template/engine.js

@@ -3,12 +3,13 @@
  * See COPYING.txt for license details.
  */
 define([
+    'jquery',
     'ko',
     'underscore',
     './observable_source',
     './renderer',
     '../../logger/console-logger'
-], function (ko, _, Source, renderer, consoleLogger) {
+], function ($, ko, _, Source, renderer, consoleLogger) {
     'use strict';
 
     var RemoteTemplateEngine,
@@ -18,7 +19,74 @@ define([
     /**
      * Remote template engine class. Is used to be able to load remote templates via knockout template binding.
      */
-    RemoteTemplateEngine = function () {};
+    RemoteTemplateEngine = function () {
+        // Instance reference for closure.
+        var engine = this,
+        // Decorate the builtin Knockout "template" binding to track synchronous template renders.
+        origUpdate = ko.bindingHandlers.template.update;
+
+        /**
+         * Counter to track the number of currently running render tasks (both synchronous and asynchronous).
+         * @type {Number}
+         * @private
+         */
+        this._rendersOutstanding = 0;
+
+        /**
+         * Use a jQuery object as an event bus (but any event emitter with on/off/emit methods could work)
+         * @type {jQuery}
+         * @private
+         */
+        this._events = $(this);
+
+        /**
+         * Rendered templates
+         * @type {Object}
+         * @private
+         */
+        this._templatesRendered = {};
+
+        /*eslint-disable no-unused-vars*/
+        /**
+         * Decorate update method
+         *
+         * @param {HTMLElement} element
+         * @param {Function} valueAccessor
+         * @param {Object} allBindings
+         * @param {Object} viewModel
+         * @param {ko.bindingContext} bindingContext
+         * @returns {*}
+         */
+        ko.bindingHandlers.template.update = function (element, valueAccessor, allBindings, viewModel, bindingContext) {
+            /*eslint-enable no-unused-vars*/
+            var options = ko.utils.peekObservable(valueAccessor()),
+                templateName,
+                updated;
+
+            if (typeof options === 'object') {
+                if (options.templateEngine && options.templateEngine !== engine) {
+                    return origUpdate.apply(this, arguments);
+                }
+
+                if (!options.name) {
+                    consoleLogger.error('Could not find template name', options);
+                }
+                templateName = options.name;
+            } else if (typeof options === 'string') {
+                templateName = options;
+            } else {
+                consoleLogger.error('Could not build a template binding', options);
+            }
+            engine._trackRender(templateName);
+            updated = origUpdate.apply(this, arguments);
+
+            if (engine._hasTemplateLoaded(templateName)) {
+                engine._releaseRender(templateName, 'sync');
+            }
+
+            return updated;
+        };
+    };
 
     /**
      * Creates unique template identifier based on template name and it's extenders (optional)
@@ -32,6 +100,64 @@ define([
     RemoteTemplateEngine.prototype = new NativeTemplateEngine;
     RemoteTemplateEngine.prototype.constructor = RemoteTemplateEngine;
 
+    /**
+     * When an asynchronous render task begins, increment the internal counter for tracking when renders are complete.
+     * @private
+     */
+    RemoteTemplateEngine.prototype._trackRender = function (templateName) {
+        var rendersForTemplate = this._templatesRendered[templateName] !== undefined ?
+            this._templatesRendered[templateName] : 0;
+
+        this._rendersOutstanding++;
+        this._templatesRendered[templateName] = rendersForTemplate + 1;
+        this._resolveRenderWaits();
+    };
+
+    /**
+     * When an asynchronous render task ends, decrement the internal counter for tracking when renders are complete.
+     * @private
+     */
+    RemoteTemplateEngine.prototype._releaseRender = function (templateName) {
+        var rendersForTemplate = this._templatesRendered[templateName];
+
+        this._rendersOutstanding--;
+        this._templatesRendered[templateName] = rendersForTemplate - 1;
+        this._resolveRenderWaits();
+    };
+
+    /**
+     * Check to see if renders are complete and trigger events for listeners.
+     * @private
+     */
+    RemoteTemplateEngine.prototype._resolveRenderWaits = function () {
+        if (this._rendersOutstanding === 0) {
+            this._events.triggerHandler('finishrender');
+        }
+    };
+
+    /**
+     * Get a promise for the end of the current run of renders, both sync and async.
+     * @return {jQueryPromise} - promise that resolves when render completes
+     */
+    RemoteTemplateEngine.prototype.waitForFinishRender = function () {
+        var defer = $.Deferred();
+
+        this._events.one('finishrender', defer.resolve);
+
+        return defer.promise();
+    };
+
+    /**
+     * Returns true if this template has already been asynchronously loaded and will be synchronously rendered.
+     * @param {String} templateName
+     * @returns {Boolean}
+     * @private
+     */
+    RemoteTemplateEngine.prototype._hasTemplateLoaded = function (templateName) {
+        // Sources object will have cached template once makeTemplateSource has run
+        return sources.hasOwnProperty(templateName);
+    };
+
     /**
      * Overrided method of native knockout template engine.
      * Caches template after it's unique name and renders in once.
@@ -43,7 +169,8 @@ define([
      * @returns {TemplateSource} Object with methods 'nodes' and 'data'.
      */
     RemoteTemplateEngine.prototype.makeTemplateSource = function (template, templateDocument, options, bindingContext) {
-        var source,
+        var engine = this,
+            source,
             templateId;
 
         if (typeof template === 'string') {
@@ -60,12 +187,13 @@ define([
                     component: bindingContext.$data.name
                 });
 
-                renderer.render(template).done(function (rendered) {
+                renderer.render(template).then(function (rendered) {
                     consoleLogger.info('templateLoadedFromServer', {
                         template: templateId,
                         component: bindingContext.$data.name
                     });
                     source.nodes(rendered);
+                    engine._releaseRender(templateId, 'async');
                 }).fail(function () {
                     consoleLogger.error('templateLoadingFail', {
                         template: templateId,
@@ -115,7 +243,7 @@ define([
     RemoteTemplateEngine.prototype.renderTemplate = function (template, bindingContext, options, templateDocument) {
         var templateSource = this.makeTemplateSource(template, templateDocument, options, bindingContext);
 
-        return this.renderTemplateSource(templateSource, bindingContext, options);
+        return this.renderTemplateSource(templateSource);
     };
 
     return new RemoteTemplateEngine;

app/code/Magento/Ui/view/base/web/js/lib/knockout/template/renderer.js

@@ -9,10 +9,11 @@ define([
 ], function ($, _, loader) {
     'use strict';
 
-    var colonReg    = /\\:/g,
-        attributes  = {},
-        elements    = {},
-        globals     = [],
+    var colonReg       = /\\:/g,
+        renderedTemplatePromises = {},
+        attributes     = {},
+        elements       = {},
+        globals        = [],
         renderer,
         preset;
 
@@ -24,11 +25,25 @@ define([
          *
          * @param {String} tmplPath - Path to the template.
          * @returns {jQueryPromise}
+         * @alias getRendered
          */
         render: function (tmplPath) {
-            var loadPromise = loader.loadTemplate(tmplPath);
+            var cachedPromise = renderedTemplatePromises[tmplPath];
 
-            return loadPromise.then(renderer.parseTemplate);
+            if (!cachedPromise) {
+                cachedPromise = renderedTemplatePromises[tmplPath] = loader
+                    .loadTemplate(tmplPath)
+                    .then(renderer.parseTemplate);
+            }
+
+            return cachedPromise;
+        },
+
+        /**
+         * @ignore
+         */
+        getRendered: function (tmplPath) {
+            return renderer.render(tmplPath);
         },
 
         /**