CODEWITHSUNDEEP
htmlbackbone.jsmarionette
FlyingCat
FlyingCat

Reputation: 14290

Backbone Marionette Routing issue

I am trying to setup the routing in my backbone.Marionette app and I am new to Backbone.

I have JS like

var firstProject= new Marionette.Application();

firstProject.addRegions({
    main   : 'main',
});

//my router
var MyRouter = Backbone.Marionette.AppRouter.extend({
  // "someMethod" must exist at controller.someMethod
  appRoutes: {
     "first" : "someOtherMethod"
  },

  /* standard routes can be mixed with appRoutes/Controllers above */
  routes : {
    "second" : "someOtherMethod"
  },
  someOtherMethod : function(){
      alert('hi')
  }
});


firstProject.on('initialize:after', function(){   
    if(Backbone.history){
        Backbone.history.start();

    } 
});

in my html, I have

<a href="#/first" class="btn btn-primary btn-lg" role="button">First product</a>
<a href="#/second" class="btn btn-primary btn-lg" role="button">First product</a>

I want to navigate my page to load my first html page and second html page when I click the links. I have read the docs but they are somehow complicated. Can someone give me a hint about this? Thanks a lot!

Upvotes: 1

Views: 107

Answers (1)

P. R. Ribeiro
P. R. Ribeiro

Reputation: 3029

The simplest form of routing your app is using property "routes" of AppRouter, like the following.

var firstProject= new Marionette.Application();

firstProject.addRegions({
    main   : 'main',
});

//my router
var MyRouter = Backbone.Marionette.AppRouter.extend({

  /* standard routes can be mixed with appRoutes/Controllers above */
  routes : {
    "second" : "secondMethodFromThisObject",
    "first" : "firstMethodFromThisObject"
  },
  firstMethodFromThisObject : function(){
      alert('hi');
  },
  secondMethodFromThisObject : function(){
      alert('hi');
  }
});


firstProject.on('initialize:after', function(){   
    if(Backbone.history){
        Backbone.history.start();
    } 
});

If you want to use the appRoutes property, as you usually would if your application was bigger. You'd be better off like in the following.

var firstProject= new Marionette.Application();

firstProject.addRegions({
    main   : 'main',
});

//my router
var MyRouter = Backbone.Marionette.AppRouter.extend({

  /* standard routes can be mixed with appRoutes/Controllers above */
  appRoutes : {
    "first" : "firstMethodFromController",
    "second" : "secondMethodFromController"
  }
});

var MyController = Marionette.Controller.extend({
    "secondMethodFromController": function() {
        alert('Hi from inside the controller');
    },
    "firstMethodFromController": function() {
        alert('Hi from inside the controller');
    }
});

firstProject.addInitializer(function () {
    // initialize routes with controller
    new MyRouter({ controller: new MyController });
});

firstProject.on('initialize:after', function(){   
    if(Backbone.history){
        Backbone.history.start();
    } 
});

Upvotes: 1

Related Questions