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' and make sure that the locations below correspond to folders and files in your project, such as the following, though you may need to adapt the below:

paths: {
    'knockout': 'libs/knockout/dist/knockout',
    'jquery': 'libs/jquery/dist/jquery.min',
    'jqueryui-amd': 'libs/jquery-ui/ui',
    'promise': 'libs/es6-promise/promise.min',
    'hammerjs': 'libs/hammerjs/hammer.min',
    'ojdnd': 'libs/oraclejet/dist/js/libs/dnd-polyfill/dnd-polyfill-1.0.0.min',
    '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',
    'signals': 'libs/js-signals/dist/signals.min'
},

5. In the '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. Check the 'app.js' is as follows:

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. Check the 'app' module as follows in the 'index' file:

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

10. The resulting code should be as in this application as described above.