Showing posts with label OracleJET. Show all posts
Showing posts with label OracleJET. Show all posts

August 8, 2017

Routing in Oracle JET

Routing is very useful in JET when we want to navigate between pages or modules. Following is the step-by-step procedure to configure the routing in Oracle JET.

·       Open main.js under sr/js folder
·       Search for function init() . By default, you see the below statements when you create a new project in this function

ko.applyBindings(new MainViewModel(), document.getElementById('globalBody'));
app.adjustContentPadding();

·       Replace these lines with the below statements in the function

oj.Router.sync().then(
                            function () {
                                // Bind your ViewModel for the content of the whole page body.
                                ko.applyBindings(app, document.getElementById('globalBody'));
                            },
                            function (error) {
                                oj.Logger.error('Error in root start: ' + error.message);
                            }
                    );
  
·       Open appController.js under src/js folder
·       In the function ControllerViewModel(), add the following code

self.router = oj.Router.rootInstance;      
                self.router.configure({
                    'home': {label: 'Home', isDefault: true},
                    'dashboard': {label: 'Dashboard'}
                });
                oj.Router.defaults['urlAdapter'] = new oj.Router.urlParamAdapter();
function mergeConfig(original) {
                    return $.extend(true, {}, original, {
                        'animation': oj.ModuleAnimations.switcher(switcherCallback)
                    });
                }

                self.moduleConfig = mergeConfig(self.router.moduleConfig);               

·       We need to configure all the pages for which we need to apply the routing. In the above code, observe the highlighted lines under self.router.configure(). Similarly, replace these pages with your pages
·       Open index.html under src folder. Copy and paste the below line under div tag with id "globalBody" where the routing will be applied

<div data-bind="ojModule: moduleConfig"></div>

·       Now the router is ready
·       Whenever you want to navigate to another page, then call the below method.
self.router.go(<page id>);
Ex: if you want to go to dashboard, then use self.router.go('dashboard');

November 22, 2016

TypeError: h.apply is not a function

This is a Knockout JS error. I faced this issue when I am trying to invoke click action of a link created. My link statement is like below.

<a data-bind="attr:{id:Reqid},text: Title,click: $('#popup1').ojPopup('open', '#btnTitle')"></a>

And on click of this link, I am getting the below error.

TypeError: h.apply is not a function

This is because the click handler needs to be wrapped within a function. Below updated statement resolved the issue.

<a data-bind="attr:{id:Reqid},text: Title,hover: function(){$('#popup1').ojPopup('open', '#btnTitle')}"></a>