What you will learn:

Creating Oracle JET modules.

How to use this sample:

1. Start by opening the previous sample and reworking it, as described in the steps below.

2. Find js\libs\oraclejet\dist\js\libs\oj\main-template.js

3. Move it to the same folder where 'main.js' is found.

4. Rewrite 'paths':

paths: {
    'knockout': 'libs/knockout/dist/knockout',
    'jquery': 'libs/jquery/dist/jquery.min',
    'jqueryui-amd': 'libs/jquery-ui/ui',
    'ojs': 'libs/oraclejet/dist/js/libs/oj/min',
    'ojL10n': 'libs/oraclejet/dist/js/libs/oj/ojL10n',
    'ojtranslations': 'libs/oraclejet/dist/js/libs/oj/resources',
    'text': 'libs/text/text',
    'promise': 'libs/es6-promise/promise.min',
    'hammerjs': 'libs/hammerjs/hammer.min',
    'signals': 'libs/js-signals/dist/signals.min',
    'ojdnd': 'libs/oraclejet/dist/libs/dnd-polyfill/dnd-polyfill-1.0.0.min'
},

5. In 'require' block in 'main-template.js', add ViewModel:

function DemoViewModel() {
}
$(document).ready(
        function ()
        {
            ko.applyBindings(new DemoViewModel());
        }
);

6. In 'require' statement, after 'ojs/knockout', add 'ojs/ojmodule'.

7. Delete 'main.js' and change the name of 'main-template.js' to 'main.js'.

8. Rewrite 'app.js' to the following:

define(['ojs/ojcore', 'knockout'
], function (oj, ko) {
    function homeContentViewModel() {
        var self = this;
        self.firstName = ko.observable('Bert');
        self.firstNameCaps = ko.pureComputed(function () {
            return this.firstName().toUpperCase();
        }, this);
    }
    return homeContentViewModel;
});

9. Load the 'app' module as follows in the 'index' file:

<div data-bind="ojModule: {name:'app'}"></div>