无法使用 Browserify 拉入主干路由器答案

【问题标题】：Trouble pulling in Backbone router with Browserify无法使用 Browserify 拉入主干路由器
【发布时间】：2014-10-31 14:56:02
【问题描述】：

我正在尝试使用 Browserify 来学习 Backbone，并且我很难弄清楚如何引入 router.navigate。但我认为这与 Backbone 路由关系不大，更多的是因为我对如何使用 Browserify 中的模块（或只是构造函数！）缺乏了解。

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

我正在使用这条线……

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

我得到了这个错误……

Uncaught TypeError: undefined is not a function

我用路由器尝试了两种不同的方法。

示例 1

main.js

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

router.js

module.exports = Backbone.Router.extend({

shouts.js

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

示例 2

main.js

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

router.js

module.exports = new Backbone.Router.extend({

shouts.js

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

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,
  }

});

main.js

'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});
        }
    });
  }
});

【问题讨论】：

标签： javascript backbone.js browserify

【解决方案1】：

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();

然后

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

【讨论】：