Question

我正在使用Backbone构建一个应用程序，并从第1步到第2步，我使用了router.navigate函数。现在它将转到下一页并返回等。

但是，我所采取的每一步都将保留在历史记录中，并且每次事件后都会访问历史记录中的每个页面。这也将显示在控制台日志中。

现在我也在使用require.js

这是我的路由器：

var OF = OF || {};
OF.SubscribeRouter = Backbone.Router.extend({

    routes: {       
        "step/:stepNumber": "goToStep",
        "*other": "defaultRoute"
    },

    goToStep: function(stepNumber) {

        switch(stepNumber) {
            case "1":
                require(['./views/step1],function(Step1) {
                    OF.step1 = new OF.Step1;
                    OF.step1.render();
                });
                break;

            case "2":
                require(['./views/step2'],function(Step2) {
                    OF.step2 = new OF.Step2;
                    OF.step2.render();
                });
                break;

            case "3":
                require(['./views/step3'],function(Step3) {

                    OF.step3 = new OF.Step3;
                    OF.step3.render();
                });
                break;

            case "4":
                require(['./views/step4'],function(Step4) {

                    OF.step4 = new OF.Step4;
                    OF.step4.render();

                });
                break;

            case "5":
                require(['./views/step5'],function(Step5) {

                    OF.step5 = new OF.Step5;
                    OF.step5.render();

                });
                break;

            case "6":
                require(['./views/step6'],function(Step6) {

                    OF.step6 = new OF.Step6;
                    OF.step6.render();

                });
            break;
        }

    },

    defaultRoute: function(other) {
        //start loading the welcome page
        this.goToStep(1);

    }

});

这是我的主文件，它将启动路由器：

var OF = OF || {};

require.config({
    paths: {
        underscore: 'vendor/underscore-min',
        jquery: 'vendor/jquery-2.0.3',
        json2: 'vendor/json2',
        backbone: 'vendor/backbone-min',
        handlebars: 'vendor/handlebars',
        router: 'routers/router'
    },
    shim: {
        'backbone': {
            deps: ['underscore', 'jquery', 'json2'],
            exports: 'backbone'
        },
        'handlebars': {
            deps: ['jquery', 'json2'],
            exports: 'handlebars'
        },
        'templateReader': {
            deps: ['jquery', 'json2', 'handlebars'],
            exports: 'templateReader'
        },
            'router': {
            deps: ['jquery', 'json2', 'backbone'],
            exports: ''
        }
    }
});

require(['router'], function(SubscribeRouter) {

    // create the application
    'use strict';

    OF = {       
        router: new OF.SubscribeRouter(),
    };

    //start router
    Backbone.history.start();

});

以下是触发“页面更改”事件的视图：

var OF = OF || {};
OF.Step1 = Backbone.View.extend({

    el: '#content',

    initialize: function() {

        console.log("you're in the address view");

    },

    render: function() {

        //save this in that ;)
        var that = this;

        OF.template.get('step1-step1', function(data) {

            //set the source en precompile the template
            var htmlSource = $(data).html();
            var template = Handlebars.compile(htmlSource);

            //fill template with object or ''
            var compiled = template(OF);

            //now place the completely compiled html into the page
            that.$el.html(compiled);

        });

    },

    events: {

        "click #next": "nextStep"

    },

    nextStep: function() {

        OF.router.navigate('step/2', {trigger: true});

    }

});

这就是我在点击下一步后在控制台日志中看到的内容：

GET template-step2.html

现在回去了：

GET template-step1.html

所以现在一切似乎都很好。但是现在我回到第1步并点击下一步我希望转到第2步。不幸的是我会转到第3步，这就是我在控制台日志中看到的内容：

GET template-step2.html
GET template-step2.html
GET template-step3.html

有没有办法清除某种类型的历史记录或阻止缓存或其它的任何方式？

在哪里可以找到router.navigate方法的选项列表？

Answer 1

我找到了这个'错误'的原因，这是因为我对每个模板中的按钮使用相同的ID。当我改变这个问题时，问题就解决了。

虽然我仍然在弄清楚缓存是否无法清除，所以我仍然可以使用相同的ID（现在是下一页不是吗？）。

骨干路由器导航保持悠久的历史

1 个答案: