Oracle JET Base FIddle

v6.0.0 base fiddle using CDN

by dougiei

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js"></script>
<h1>Users List</h1>
<span>This demo will not run in Internet Explorer 11 because of the use of the HTML5 template element.</span>
<br/><br/>

<!--  
JET UI components are implemented as custom elements following the HTML5 Web Component specification
You interact with them just like any other HTML DOM element.
-->

<div id ="formID" class="oj-form">




<div>
<H1> Test1 

</H1>
<oj-radioset id="radioset2" labelled-by="mainlabelid2">
<oj-bind-for-each data="[[suggestedCodes]]" as="item" >

    <template>
    <oj-option  value="[[item.Ccy]]"> <span><oj-bind-text value='[[item.CcyNm]]'></oj-bind-text> </span>  
    </oj-option>
    </template>
  </oj-bind-for-each>
</oj-radioset>


</div>
<div>
<H1> Test2 

</H1>
<oj-bind-for-each data="[[mylist]]" as="item2">
  <template>
     
     <p>
     <oj-bind-text value='[[item2.value]]'> </oj-bind-text>
     </p>
    </template>
  
</oj-bind-for-each>
</div>


<div>
<H1> Test3 </H1> 

<oj-radioset id="radiosetBasicDemoId" labelled-by="mainlabelid"
                        >
              <!-- ko foreach:suggestedCodes   -->
              <oj-option value="[[Ccy]]">
                  <span data-bind="text: CcyNm + ' ('+Ccy+')'"></span>
              </oj-option>
              <!-- /ko --><br>
             
          </oj-radioset>
          
          </div>

CSS

/**
The default theme for JET is based on Oracle's Alta UI spec.  
Theming is provided via SASS with full .scss source code provided
and a Theme Builder application to help build custom themes when needed.
**/

@import url('//static.oracle.com/cdn/jet/v6.0.0/default/css/alta/oj-alta-min.css');
body {
  padding: 20px;
}

JavaScript

/**
RequireJS is used for lazy loading of resources as well as dependency resolution.
**/

require(['knockout',
  'ojs/ojcore',
  'jquery',
  'ojs/ojknockout',
    'ojs/ojradioset'
], function(ko, oj, $) {
  'use strict';


  /**
  JET uses a Model-View-ViewModel(MVVM) Architecture.
  **/
  var ViewModel = function() {
    var self = this;
     
    self.mylist = [  {id:1, value: "String1"}, {id:2, value : "String2"}, {id:3, value : "String3"}];
   console.log(self.mylist);
    
  };
  
self.suggestedCodes =  [ {
         "CtryNm": "AFGHANISTAN",
         "CcyNm": "Afghani",
         "Ccy": "AFN",
         "CcyNbr": "971",
         "CcyMnrUnts": "2"
      },
      {
         "CtryNm": "Ă…LAND ISLANDS",
         "CcyNm": "Euro",
         "Ccy": "EUR",
         "CcyNbr": "978",
         "CcyMnrUnts": "2"
      },
      {
         "CtryNm": "ALBANIA",
         "CcyNm": "Lek",
         "Ccy": "ALL",
         "CcyNbr": "008",
         "CcyMnrUnts": "2"
      }];
      
  ko.applyBindings(new ViewModel());
});


/**
JET libraries, as well as 3rd party libraries that are distributed as part of JET, are available via a Content Delivery Network(CDN) to help provide the best  performance for your product. 

This also makes upgrading to new releases very quick and easy.
**/

function _getCDNPath(paths) {
  var cdnPath = "https://static.oracle.com/cdn/jet/";
  var ojPath = "v6.0.0/default/js/";
  var thirdpartyPath = "v6.0.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];
  });
  return newPaths;
}

requirejs.config({
  paths: _getCDNPath({
    'knockout': 'knockout/knockout-3.4.2',
    'jquery': 'jquery/jquery-3.3.1.min',
    'jqueryui-amd': 'jquery/jqueryui-amd-1.12.1.min',
    'promise': 'es6-promise/es6-promise.min',
    'ojs': 'min',
    'ojL10n':...