Javascript 使用Browserify拉入主干路由器时出现问题

我正试图通过Browserify学习主干网，并且在试图找出如何使用router.navigate时遇到了最困难的问题。但我认为这与主干路由关系不大，更多的是与我缺乏如何使用Browserify中的模块（或者仅仅是构造函数）的知识有关

我有一个简单的“shoutbox”表单。提交时，字段将保存到服务器上的模型中，该模型正在工作。问题是当我尝试重定向到另一个页面时

我在用这条线

router.navigate('/shouts', {trigger: true});

我得到了这个错误

Uncaught TypeError: undefined is not a function

我用路由器试过两种不同的方法

示例1

main.js

路由器.js

shouts.js

示例2

main.js

路由器.js

shouts.js

1首先，我尝试仅导出路由器构造函数。然后在main.js中，我创建了一个“新”路由器。这一切都很顺利，因为当时我所有的路线都很简单。但是我需要在ShoutEditView中重定向。我猜它需要访问路由器实例？我试着在ShoutEditView文件的顶部要求router.js并创建一个新的路由器实例，但这似乎并不正确。我应该使用我已经创建的同一个实例，不管怎样，我还是得到了同样的错误

2因此，我尝试在router.js中导出路由器，并在其前面加上“new”。因此，我可以只需要它而不创建新实例。但这似乎也不起作用

我在想，我需要在某个地方创建一个路由器实例，然后以某种方式将其传递给ShoutEditView

router.js

'use strict';

var $ = require('jquery');
var Backbone = require('backbone');
Backbone.$ = $;

var homeController = require('./controllers/home');
var shoutsController = require('./controllers/shouts');

module.exports = Backbone.Router.extend({

  routes: {
    'home': homeController.home,
    'shouts': shoutsController.index,
    'shouts/new': shoutsController.new,
    'shouts/:id': shoutsController.show,
    'shouts/:id/edit': shoutsController.edit,
  }

});

'use strict';

var $ = require('jquery');
var Backbone = require('backbone');
Backbone.$ = $;

var router = require('./router');
//var router = new Router();

$('body').on('click', '.back-button', function (event) {
    event.preventDefault();
    window.history.back();
});

Backbone.history.start();

main.js

'use strict';

var $ = require('jquery');
var Backbone = require('backbone');
Backbone.$ = $;

var homeController = require('./controllers/home');
var shoutsController = require('./controllers/shouts');

module.exports = Backbone.Router.extend({

  routes: {
    'home': homeController.home,
    'shouts': shoutsController.index,
    'shouts/new': shoutsController.new,
    'shouts/:id': shoutsController.show,
    'shouts/:id/edit': shoutsController.edit,
  }

});

'use strict';

var $ = require('jquery');
var Backbone = require('backbone');
Backbone.$ = $;

var router = require('./router');
//var router = new Router();

$('body').on('click', '.back-button', function (event) {
    event.preventDefault();
    window.history.back();
});

Backbone.history.start();

shoutEditView

var ShoutEditView = new Backbone.View.extend({
  el: '#app',
  events: {'submit': 'save'},
  initialize: function () {
      this.render();
  },
  render: function () {
    var template = require('../templates/shouts/new.html');
    this.$el.html(template());
  },
  save: function(e) {
    e.preventDefault();
    var data = $('#foo').serializeObject();
    var shout = new Shout();
    shout.save(data, {
        success: function (shout) {
            console.log(shout.toJSON());
            console.dir(router);
            router.navigate('/shouts', {trigger: true});
        }
    });
  }
});

---

Singleton

模式应该有帮助

'use strict';

var $ = require('jquery');
var Backbone = require('backbone');
Backbone.$ = $;

var homeController = require('./controllers/home');
var shoutsController = require('./controllers/shouts');

var Router = Backbone.Router.extend({

  routes: {
    'home': homeController.home,
    'shouts': shoutsController.index,
    'shouts/new': shoutsController.new,
    'shouts/:id': shoutsController.show,
    'shouts/:id/edit': shoutsController.edit,
  }

});


var _instance;

var SingletonRouter = function() {
    if (_instance === undefined) {
        _instance = new Router();
    }
    return _instance;
};

module.exports = new SingletonRouter();

然后

'use strict';

var $ = require('jquery');
var Backbone = require('backbone');
Backbone.$ = $;

var homeController = require('./controllers/home');
var shoutsController = require('./controllers/shouts');

module.exports = Backbone.Router.extend({

  routes: {
    'home': homeController.home,
    'shouts': shoutsController.index,
    'shouts/new': shoutsController.new,
    'shouts/:id': shoutsController.show,
    'shouts/:id/edit': shoutsController.edit,
  }

});

'use strict';

var $ = require('jquery');
var Backbone = require('backbone');
Backbone.$ = $;

var router = require('./router');
//var router = new Router();

$('body').on('click', '.back-button', function (event) {
    event.preventDefault();
    window.history.back();
});

Backbone.history.start();

var ShoutEditView = new Backbone.View.extend({
  el: '#app',
  events: {'submit': 'save'},
  initialize: function () {
      this.render();
  },
  render: function () {
    var template = require('../templates/shouts/new.html');
    this.$el.html(template());
  },
  save: function(e) {
    e.preventDefault();
    var data = $('#foo').serializeObject();
    var shout = new Shout();
    shout.save(data, {
        success: function (shout) {
            console.log(shout.toJSON());
            console.dir(router);
            router.navigate('/shouts', {trigger: true});
        }
    });
  }
});

'use strict';

var $ = require('jquery');
var Backbone = require('backbone');
Backbone.$ = $;

var homeController = require('./controllers/home');
var shoutsController = require('./controllers/shouts');

var Router = Backbone.Router.extend({

  routes: {
    'home': homeController.home,
    'shouts': shoutsController.index,
    'shouts/new': shoutsController.new,
    'shouts/:id': shoutsController.show,
    'shouts/:id/edit': shoutsController.edit,
  }

});


var _instance;

var SingletonRouter = function() {
    if (_instance === undefined) {
        _instance = new Router();
    }
    return _instance;
};

module.exports = new SingletonRouter();

var router = require('router');
...
router.navigate('/shouts', {trigger: true});