backbone.js - 使用 Backbone.js 路由器浏览使用 require.js 模块化的 View

Question

我使用 require 将 View 和路由器分成单独的文件。然后我有一个 main.js 文件来实例化路由器，并呈现我的默认 View 。

我的路由器具有查看('View/:id')和编辑('Edit/:id')作为路由。在 main.js 中，当我实例化路由器时，我可以对 router.navigate('View/1', true) 进行硬编码，并且导航工作正常。在我的 View 文件中，当我单击编辑链接时，我想调用 router.navigate('View/' + id, true)，但我不确定应该如何执行此操作。

我已经成功调用 Backbone.history.navigate('View/' + id, true)，但我觉得我不应该依赖全局 Backbone 对象。

我尝试将 ({ router: appRouter }) 传递到我的 View ，以便我可以使用 this.options.router.navigate()，但这对我不起作用。

如果您好奇，这里是我的应用程序中的一堆代码:

路由器:

define(['./View', './Edit'], function (View, Edit) {
    return Backbone.Router.extend({
        routes: {
            'View/:id': 'view',
            'Edit/:id': 'edit'
        },

        view: function (id) {
            var model = this.collection.get(id);
            var view = new View({ model: model });
            view.render();
        },

        edit: function (id) {
            var model = this.collection.get(id);
            var edit = new Edit({ model: model });
            edit.render();
        }
    });
});

查看:

define(function () {
    return Backbone.View.extend({
        template: Handlebars.compile($('#template').html()),

        events: {
            'click .edit': 'edit'
        },

        render: function () {
            //Create and insert the cover letter view
            $(this.el).html(this.template(this.model.toJSON()));
            $('#View').html(this.el);

            return this;
        },

        edit: function () {
            Backbone.history.navigate('Edit/' + this.model.id, true); 
        },
    });
});

Answer 1

如果其他人像我一样正在寻找这个问题的解决方案，我将发布我最终所做的事情。如果您使用样板backbone.js，那么您将在router.js 中拥有一个initialize() 函数。我修改了 initialize() 函数，如下所示:

initialize = function () {
  var app_router;
  app_router = new AppRouter();

  // Extend the View class to include a navigation method goTo
  Backbone.View.goTo = function (loc) {
    app_router.navigate(loc, true);
  };

  Backbone.history.start();
};

由于backbone.js 的特殊继承风格，这允许我从我的任何 View 中调用MyView.goTo(location);。