Unbind a router in backbone.js

Asked 13/2, 2012 at 13:12 Answered 1/5, 2015 at 19:42

So I need to remove a router in backbone.js to prevent it's routes from occuring. I've tried myRouter.off() and myRouter.remove() without any luck.

What can I do instead?

Weirdo answered 13/2, 2012 at 13:12 Comment(0)

There's no officially supported way to do this (that I know of). If you want to disable any router, you can use Backbone.history.stop();, which is undocumented, but shows up in the source code with this comment:

// Disable Backbone.history, perhaps temporarily. Not useful in a real app,
// but possibly useful for unit testing Routers.

Otherwise, you'd have to code some passthrough condition in your router's route handlers if the state of the router is "disabled" or something like that. Or iterate on the undocumented Backbone.history.handlers (the internal array containing the .route - as a regexp - and .callback) and remove the routes related to this specific router.

Obviously, being undocumented and all, this is subject to change in future releases of Backbone.

Mong answered 13/2, 2012 at 13:36 Comment(1)

funny, I would think disabling it after logging out of App is useful, there are other ways to handle it, but i'd really like backbone.history.stop – Duplicate 31/3, 2014 at 11:2

if you are able to control the instantiation of your router, you can do the following:

var myRouter = new MyRouter({ routes: function(){
  return;
}});

Eucalyptus answered 12/6, 2014 at 22:48 Comment(0)

You can use hack-based solution (it uses non-API methods and may stop working with new versions of Backbone.js)

var router = new(Backbone.Router.extend({

  routes: {
    "authentication": "authentication",
    "contacts": "contacts",
    "*notFound": "notFound"
  },

  /**
   * @param {string} routeName
   */
  disableRoute: function(routeName) {
    var index, handler, handlers = Backbone.history.handlers;
    delete this.routes[routeName];
    for (var i = 0, len = handlers.length; i < len; i++) {

      handler = handlers[i];
      if (handler.route.toString() === router._routeToRegExp(routeName).toString()) {
        handlers.splice(index, 1);
        break;
      }
    }
  },

  contacts: function() {
    alert('route `contacts`');
  },
  authentication: function() {
    alert('route `authentication`');
  },
  notFound: function() {
    alert('route `notFound`');
    router.navigate('404');
  }
}));

Backbone.history.start({
  silent: true
});

$(function() {
  $('#remove').on('click', function() {
    router.disableRoute('authentication');

    router.navigate('404');
  });

  $('#goto_auth').on('click', function() {
    router.navigate('authentication', {
      trigger: true
    });
  });

  $('#goto_contacts').on('click', function() {
    router.navigate('contacts', {
      trigger: true
    });
  });
});

button {
  display: block;
  margin: 10px;
}

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>

</head>

<body>
  <button id="goto_auth">goto authentication route</button>
  <button id="goto_contacts">goto contacts route</button>
  <hr>
  <button id="remove">remove authentication route</button>
</body>

</html>

Friedcake answered 1/5, 2015 at 19:42 Comment(0)

Recommended topics

Hot tags