Topcoder Blog Gists

BlogRequireJSDinamic.app

<aura:application>
  <aura:handler event="forcelogic2:BlogRequireJSEvent" action="{!c.initJS}"/>
  <aura:registerEvent type="forcelogic2:BlogRequireJSEvent" name="requireJSEvent"/>
  <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
  <div id="afterLoad">Old value</div>
</aura:application>

BlogRequireJSDinamicController.app

({
  /*
    Sets up the RequireJS library (async load)
  */
  doInit : function(component, event, helper){
       
    if (typeof require !== "undefined") {
      var evt = $A.get("e.forcelogic2:BlogRequireJSEvent");
      evt.fire();
    } else {
      var head = document.getElementsByTagName('head')[0];
      var script = document.createElement('script');
       
      script.src = "/resource/RequireJS"; 
      script.type = 'text/javascript';
      script.key = "/resource/RequireJS"; 
      script.helper = this;
      script.id = "script_" + component.getGlobalId();
      var hlp = helper;
      script.onload = function scriptLoaded(){
        var evt = $A.get("e.forcelogic2:BlogRequireJSEvent");
        evt.fire();
      };
      head.appendChild(script);
    }
  },
   
  initJS : function(component, event, helper){
    require.config({
      paths: {
        "jquery": "/resource/BlogScripts/jquery.min.js?",
        "bootstrap": "/resource/BlogScripts/boostrap.min.js?"
      }
    });
    console.log("RequiresJS has been loaded? "+(require !== "undefined"));
    //loading libraries sequentially
    require(["jquery"], function($) {
      console.log("jQuery has been loaded? "+($ !== "undefined"));
      require(["bootstrap"], function(bootstrap) {
        console.log("bootstrap has been loaded? "+(bootstrap !== "undefined"));

        $A.run(function(){
          //do whatever GUI initialization you want
          //in the aura context
          $("#afterLoad").html("VALUE CHANGED!!!");
        });
           
      });//require end
    });//require end
  }
})

gbockus1

https://na17.salesforce.com/resource/Gordonk66__jquery/jquery.jsresource/Gordonk66__jquery/jquery.js

gbockus2

<aura:handler event="Gordonk66:requiresReady" action="{!c.initScripts}"/>

gbockus3

requirejs.config({
        baseUrl: "/resource/",
        paths: {
          jquery: "/resource/Gordonk66__jquery/jquery",
          bootstrap: "/resource/Gordonk66__aotp_bootstrap/js/bootstrap",
          bootstrapValidator: "/resource/Gordonk66__bootstrapvalidator/bootstrapvalidator/dist/js/bootstrapValidator"
        },
        shim: {
          bootstrap: {deps: ["jquery"]},
          bootstrapValidator: {deps: ["jquery"]}
        }