Question

我正在尝试使用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});
        }
    });
  }
});

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

使用Browserify解决Backbone路由器问题

1 个答案: