Backbone.js 后退按钮未加载正确的视图

Question

在我的 Backbone 应用程序中，我试图弄清楚为什么当我单击页面上的后退按钮时，URL 会相应更改，但实际浏览器显示却没有。

这是一个流程：

1. 前往申请：选举/
2. 起始页：选举/#profile/manage/:id/
3. 点击的页面：选举/#profile/manage/:id/personalInfo/
4. 单击了返回按钮。应该最终显示选举/#profile/manage/:id/

但是当点击后退按钮时，页面显示并没有改变，只是 URL。

我不确定是什么原因造成的，也不确定如何解决这个问题。我已经阅读了有关 Backbone.history.start() 命令选项的一些内容，但是每当我向其中添加任何内容时，都不会显示任何内容。

不太确定如何解决这个问题。有人可以指出我正确的方向吗？ （如果需要，我可以扩展代码示例，我只是认为这可能更容易阅读）

elections/app.js - 从elections/index.html调用

require.config({

    baseUrl: 'js/lib',

    paths: {
        app: '../app',
        tpl: '../tpl',
        bootstrap: 'bootstrap/js/',

    },

    shim: {
        'backbone': {
            deps: ['underscore', 'jquery'],
            exports: 'Backbone'
        },
        'underscore': {
            exports: '_'
        },
    }
});

require([
    'jquery', 
    'backbone', 
    'app/router',
], function ($, Backbone, Router) {
    var router = new Router();
    Backbone.history.start({pushState:true});
});

elections/js/router.js - 在 app.js 中实例化

define(function (require) {

    "use strict";

    var $           = require('jquery'),
        Backbone    = require('backbone'),
        WindowView   = require('app/views/Window'),

        breadcrumbs = {"Home": ""},
        $body = "",
        $content = "",

    return Backbone.Router.extend({

        routes: {
            ''                                                : 'home',

            'profile/login(/)'                                : 'candidateProfileLogin',
            'profile/manage(/)'                               : 'candidateProfileLogin',
            'profile/manage/:id(/)'                           : 'candidateProfileHome',
            'profile/manage/:id/:section(/)'                  : 'candidateProfileSection',
        },

        initialize: function () {
            require([], function () {
                $body = $('body');
                windowView = new WindowView ({el: $body}).render();
                $content = $("#content", windowView .el);
            });
        },

        candidateProfileHome: function (id) {
            require(["app/views/Candidate", "app/models/candidate"], function (CandidateView, models) {
                var candidate = new models.Candidate({id: id});
                console.log('router: candidateProfileHome');
                candidate.fetch({
                    success: function (data, response) {
                        var view = new CandidateView({model: data, el: $content});
                        view.render();
                    },
                    error: function (data, response) {
                        var view = new CandidateView({model: data, el: $content});
                        view.render();
                    }
                });

                breadcrumbs['Profile Home'] = Backbone.history.fragment;
                windowView.addBreadcrumbs(breadcrumbs);
                windowView.selectMenuItem('candidate-menu');
            });
        },

        candidateProfileSection: function (id, section) {
            require(["app/views/Candidate", "app/models/candidate"], function (CandidateView, models) {
                var sectionNames = {
                    'questionnaire': 'Questionnaire',
                    'endorsements' : 'Endorsements',
                    'photo'        : 'Photo',
                };
                var sectionName = sectionNames[section];

                var candidate = new models.Candidate({id: id});
                candidate.fetch({
                    success: function (data, response) {
                        var view = new CandidateView({model: data, el: $content});
                        view.render(section);
                    },
                    error: function (data, response) {
                        //Output the data to the console. Let the template take care of the error pages
                        console.log(data);
                        var view = new CandidateView({model: data, el: $content});
                        view.render(section);
                    }
                });

                breadcrumbs['Profile Home'] = "profile/manage/" + id + "/";
                breadcrumbs[sectionName] = Backbone.history.fragment;
                windowView.addBreadcrumbs(breadcrumbs);
                windowView.selectMenuItem('candidate-menu');
            });
        },

        candidateProfileQuestionnaire: function (id, page) {
            require(["app/views/Candidate", "app/models/candidate"], function (CandidateView, models) {
                var pageNames = {
                    'personalInfo': 'Personal Information',
                    'essay'       : 'Biography & Essay',
                    'survey'      : 'Survey Questions',
                    'endorsements': 'Endorsements',
                    'photo'       : 'Photo'
                };
                var pageName = "Questionnaire: " + pageNames[page];

                var candidate = new models.Candidate({password: id});
                candidate.fetch({
                    success: function (data, response) {
                        console.log('success');
                        var view = new CandidateView({model: data, el: $content});
                        view.render(page);
                    },
                    error: function (data, response) {
                        //Output the data to the console. Let the template take care of the error pages
                        console.log('error');
                        console.log(data);
                        var view = new CandidateView({model: data, el: $content});
                        view.render(page);
                    }
                });

                breadcrumbs['Profile Home'] = "profile/manage/" + id + "/";
                breadcrumbs[pageName] = Backbone.history.fragment;
                windowView.addBreadcrumbs(breadcrumbs);
                windowView.selectMenuItem('candidate-menu');
            });
        },
    });
});

Answer 1

您不需要专门配置 Backbone 的路由器来处理浏览器历史状态或事件，它是内置的。问题出在其他地方......在您的情况下，它是视图，呈现模板。

Answer 2

我们有两种解决方案

Backbone.Router.navigate("url", {trigger: true});

或

Backbone.history.back();