Using RequireJS in an Oracle JET Application

Oracle JET includes the RequireJS library and sample bootstrap file in the Oracle JET download. To use RequireJS in your application, edit the bootstrap file to add the Oracle JET modules you need. You can also add your own modules as needed for your application code.

The code below shows the main-template.js bootstrap file distributed with Oracle JET. Typically, you place the bootstrap file in your application's js directory and rename it to main.js . The comments in the code describe the purpose of each section. The sections that you normally edit are highlighted in bold.

requirejs.config({
  // Path mappings for the logical module names
  paths: {
  'knockout': 'libs/knockout/knockout-3.3.0',
  'jquery': 'libs/jquery/jquery-2.1.3.min',
  'jqueryui-amd': 'libs/jquery/jqueryui-amd-1.11.4.min',
  'ojs': 'libs/oj/v1.1.2/min',
  'ojL10n': 'libs/oj/v1.1.2/ojL10n',
  'ojtranslations': 'libs/oj/v1.1.2/resources',
  'signals': 'libs/js-signals/signals.min',
  'crossroads': 'libs/crossroads/crossroads.min',
  'text': 'libs/require/text',
  'promise': 'libs/es6-promise/promise-1.0.0.min',
  'hammerjs': 'libs/hammer/hammer-2.0.4.min'
},

  // Shim configurations for modules that do not expose AMD
  shim: {
    'jquery': {
       exports: ['jQuery', '$']
    },
    'crossroads': {
       deps: ['signals'],
       exports: 'crossroads'
    }
},

// This section configures the i18n plugin. It is merging the Oracle JET built-in translation 
// resources with a custom translation file.
// Any resource file added, must be placed under a directory named "nls". You can use a path mapping or you can define
// a path that is relative to the location of this main.js file.
    config: {
        ojL10n: {
            merge: {
                //'ojtranslations/nls/ojtranslations': 'resources/nls/myTranslations'
            }
        }
    }
});
 
/**
 * A top-level require call executed by the Application.
 * Although 'ojcore' and 'knockout' would be loaded in any case (they are specified as dependencies
 * by the modules themselves), we are listing them explicitly to get the references to the 'oj' and 'ko'
 * objects in the callback
 *
 * For a listing of which JET component modules are required for each component,
 * see the specific component demo pages in the JET cookbook.
 */
require(['ojs/ojcore', 'knockout', 'jquery', 'ojs/knockout', 'ojs/ojbutton', 'ojs/ojtoolbar', 'ojs/ojmenu'],
  // add additional JET component libraries as needed
  function(oj, ko, $) // this callback gets executed when all required modules are loaded
  {
      // add any startup code that you want here
  }
);

To use RequireJS in an Oracle JET Application:

1. Install Oracle JET and RequireJS as described in Using RequireJS to Manage Library, Link, and Script References.
2. In the bootstrap file or your application scripts, in the require() definition, add additional Oracle JET modules as needed using the modules listed in Oracle JET Module Organization.

   For example, if your application uses the Oracle JET Common Model integrated with Knockout and includes an ojDialog component, you would add the highlighted code to your bootstrap file or application script.

   require(['ojs/ojcore', 'knockout', 'jquery', 'ojs/ojmodel', 'ojs/ojknockout-model','ojs/ojdialog'],
     function(oj, ko) // obtaining a reference to the oj namespace
     {
     }
   );
   

3. Add any scripts that your application uses to the require() definition and update the function(oj, ko) definition to include the script.

   For example, if your script is named app.js, add the highlighted code to your require() definition.

   require(['app', 'ojs/ojcore', 'knockout', 'jquery', 'ojs/ojmodel', 'ojs/ojknockout-model', 'ojs/ojdialog'],
     function(app, oj, ko) // obtaining a reference to the oj namespace
     {
     }
   );
   

   Note:

   You can also use RequireJS with the ojModule binding to define view templates and viewModels for page sections in a single-page application. For example, the Oracle JET QuickStart Basic Template uses the ojModule binding with RequireJS to use a different view and viewModel when the user clicks one of the navigation buttons.

   For additional information about the Oracle JET QuickStart Basic Template, see Using the Oracle JET QuickStart Templates. For more information about using the ojModule binding and Knockout templates, see Creating Single-Page Applications.

4. Add any application startup code to the callback function.

   For example, the following code adds a Knockout binding call to the callback function for an element named dialogWrapper.

   require(['app', 'ojs/ojcore', 'knockout', 'jquery', 'ojs/ojmodel', 'ojs/ojknockout-model', 'ojs/ojdialog'],
     function(app, oj, ko) // obtaining a reference to the oj namespace
     {
       ko.applyBindings(new app()/*View Model instance*/,
                        document.getElementById('dialogWrapper'));
     }
   );
   

5. If your application includes resource bundles, enter the path to the bundle in the merge section.

   config: {
     ojL10n: {
       merge: {
         'ojtranslations/nls/ojtranslations': 'resources/nls/myTranslations'
       }
     }
   }