insertUI Process

  1. The MessageHandler
  • Checks whether the provided selector has multiple DOM elements

  • Calls renderContent(html, el, dependencies) which triggers

  • renderHtml(html, el, dependencies) processes the provided HTML

    • Renders all given dependencies into the page’s head.
    • Inserts the HTML into the page at the position provided in the insertUI where parameter (insertAdjacentHTML).
    • Initializes any input binds them to the scope.
    • Sends the value to the server (to invalidate output/observers) and connects/bounds the outputs.

addMessageHandler('shiny-insert-ui', function(message) {
    var targets = $(message.selector);
    if (targets.length === 0) {
      // render the HTML and deps to a null target, so
      // the side-effect of rendering the deps, singletons,
      // and <head> still occur
      console.warn('The selector you chose ("' + message.selector +
                   '") could not be found in the DOM.');
      exports.renderHtml(message.content.html, $([]), message.content.deps);
    } else {
      targets.each(function (i, target) {
        exports.renderContent(target, message.content, message.where);
        return message.multiple;
      });
    }
  });