Oracle JET 3.2.0 JSFiddle

Base fiddle with Oracle JET 3.2.0 using CDN

by Lucas Jellema

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.3.2/require.min.js"></script>
<div id='container'>
  <h1 title="Application Name" data-bind="text: title"></h1>
</div>

CSS

@import url('//static.oracle.com/cdn/jet/v3.2.0/default/css/alta/oj-alta-min.css');

JavaScript

require(['knockout',
  'ojs/ojcore',
  'jquery',
  'custom-modules/my-module',
  'ojs/ojknockout'
], function(ko, oj, $, mymodule) {
  'use strict';

  var ViewModel = function() {
    var self = this;
    self.title = ko.observable();
    self.title(mymodule.application.name);
  }; //ViewModel
  ko.applyBindings(new ViewModel(), document.getElementById('container'));
});

function _getCDNPath(paths) {
  var cdnPath = "https://static.oracle.com/cdn/jet/";
  var ojPath = "v3.2.0/default/js/";
  var thirdpartyPath = "v3.2.0/3rdparty/";
  var keys = Object.keys(paths);
  var newPaths = {};

  function _isoj(key) {
    return (key.indexOf('oj') === 0 && key !== 'ojdnd');
  }
  keys.forEach(function(key) {
    newPaths[key] = cdnPath + (_isoj(key) ? ojPath : thirdpartyPath) + paths[key];
  });
  // add custom modules - path references to GitHub through RawGit
  newPaths['custom-modules'] = "https://rawgit.com/lucasjellema/supporting-sources/master/basic-jet-snippet";
  return newPaths;
}

requirejs.config({
  paths: _getCDNPath({
    'knockout': 'knockout/knockout-3.4.0',
    'jquery': 'jquery/jquery-3.1.1.min',
    'jqueryui-amd': 'jquery/jqueryui-amd-1.12.0.min',
    'promise': 'es6-promise/es6-promise.min',
    'ojs': 'min',
    'ojL10n': 'ojL10n',
    'ojtranslations': 'resources',
    'signals': 'js-signals/signals.min',
    'text': 'require/text',
    'hammerjs': 'hammer/hammer-2.0.8.min',
    'ojdnd': 'dnd-polyfill/dnd-polyfill-1.0.0.min',
    'customElements': 'webcomponents/CustomElements'
  }),
  // Shim configurations for modules that do not expose AMD
  shim: {
    'jquery': {
      exports: ['jQuery', '$']
    }
  }
});