Forum Stats

  • 3,733,833 Users
  • 2,246,829 Discussions
  • 7,856,888 Comments

Discussions

How to navigate to a view with oj-button

User_INPR6
User_INPR6 Member Posts: 6 Green Ribbon

I’m trying to create a button that jumps to another view when clicked. I created the Button like this:

 <button class="oj-button-primary"
        data-bind="click: test,
                   ojComponent: {
                       component: 'ojButton',
                       label: 'test'
                   }">              
</button>

My ViewModel looks like this:

define(['jquery','appController', 'accUtils', 'ojs/ojbutton' ],
 function() {
    function AboutViewModel() {
      
        var self = this;
        self.test = function() {
        router.rootInstance.go('start');
        };
    }
    return AboutViewModel;
  }
);

When i press the button i get following error:

Uncaught ReferenceError: router is not defined
    at AboutViewModel.self.test (about.js:17)
    at HTMLButtonElement.<anonymous> (knockout-3.5.1.debug.js:4669)
    at HTMLButtonElement.dispatch (jquery-3.5.1.js:5429)
    at HTMLButtonElement.elemData.handle (jquery-3.5.1.js:5233)
	AboutViewModel.self.test	@	about.js:17
	(anonymous)	@	knockout-3.5.1.debug.js:4669
	dispatch	@	jquery-3.5.1.js:5429
	elemData.handle	@	jquery-3.5.1.js:5233

I also tried to work it out with JQuery. I think I must have made a pretty obvious mistake somewhere, but i cant figured out where.

Thank you

Best Answer

  • Philip Sommer
    Philip Sommer Member Posts: 77 Red Ribbon
    edited May 14 Accepted Answer

    Hi INPR6,


    Your main issue is, that you do not have a correct reference to the Router set up in appcontroller.js.

    Looking at https://www.oracle.com/webfolder/technetwork/jet/jsdocs/oj.ModuleRouterAdapter.html , the ModuleRouterAdapter passes a reference of the router to the loaded module either through the constructor or an initialize method. The template would use the former method, so you would modify:


    function AboutViewModel(args) {
    
      const parentRouter = args.parentRouter;
    
    
      this.navigateToDashboard = function(){
        parentRouter.go({  path: 'dashboard' });
      }
      
    ...
    


    Kind Regards,

    Philip

    John 'JB' Brock-Oracle

Answers

Sign In or Register to comment.