Question

Is it possible to bind methods from other object in the Router.routes map?

I have all the “logic code” inside of Views and I would like to avoid define methods in the Router.

For instance, I have this:

var app = new (Backbone.View.extend({    
         playHome: function(){
            // logic code here
         }
//..........
});
var router = new (Backbone.Router.extend({
        routes: {
          "play"         : 'playHome'
        },
        playHome: function(){
            app.playHome();
        }

I woud like to do something like this:

var router = new (Backbone.Router.extend({
        routes: {
          "play"         : 'app.playHome'
        },

thanks in advance

Answer 1

Here’s a fairly easy way to accomplish what you want:

  var WorkspaceRouter = Backbone.Router.extend({
    routes: {
      "help": "help", // #help
      "search/:query": "search", // #search/kiwis
      "search/:query/p:page": "search" // #search/kiwis/p7
    },

    help : function () { },

    search : function () { }
  });

  var App = {
    help: function() { console.log("help"); },

    search: function(query, page) { console.log("search", query, page); }
  };

  $(document).ready(
      function () {
        var router = new WorkspaceRouter();
        Backbone.history.start();

        router.on("route:help", App.help);
        router.on("route:search", App.search);
      }
  );

This solution relies on the fact that Backbone fires an event for each route as well as calling a function on the router itself. If you’re willing to allow the dummy functions on the router that do nothing then you can attach whatever you like to the router’s events and call any number of other functions on other objects, attaching the whole thing (or detaching it) as needed.