如何在Backbone.js中的Router.routes中绑定外部方法

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.

Answer 2

查看Backbone.Marionette的AppRouter ..它允许您提供一个控制器对象，它必须提供所需的路由方法。

Answer 3

Here's another way to accomplish what you're looking for...

var app = new (Backbone.View.extend({    
    playHome: function(){
        // logic code here
    }
    //..........
});

var router = new (Backbone.Router.extend({
    initialize: function(){
        // route,  route name for event, callback function
        this.route("play", "playRoute", _.bind(app.playHome, app))
    },

It's calling app.playHome as the callback function for the route, with app bound as this for the callback.

Answer 4

I think I read this somewhere, where? no idea. But you can pass first-class functions as values to the routes object. This way:

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

No guarantees though! Wonder where I read this. Hope this helps