Question

我的app init如下所示：

    var $ = jQuery = require('jquery'),
    Router = require('./router'),
    Backbone = require('backbone');
var bootstrap = require('bootstrap');

var app = {
    init: function () {
        "use strict";
        Backbone.$ = $;

        $(document).ready(function () {

            this.router = new Router();
            console.log("In router");
            /*if (!Backbone.history.start()) {
                router.navigate('404', {trigger:true});
            }*/
            Backbone.history.start();
        });

        // All navigation that is relative should be passed through the navigate
        // method, to be processed by the router.  If the link has a data-bypass
        // attribute, bypass the delegation completely.
        $(document).on("click", "a:not([data-bypass])", function (evt) {
            // Get the anchor href and protcol
            var href = $(this).attr("href");
            var protocol = this.protocol + "//";

            // Ensure the protocol is not part of URL, meaning its relative.
            if (href && href.slice(0, protocol.length) !== protocol &&
                href.indexOf("javascript:") !== 0) {
                // Stop the default event to ensure the link will not cause a page
                // refresh.
                evt.preventDefault();

                // `Backbone.history.navigate` is sufficient for all Routers and will
                // trigger the correct events.  The Router's internal `navigate` method
                // calls this anyways.
                Backbone.history.navigate(href, true);
            }
        });
    }
};

app.init();

我的路线：

    var $ = jQuery = require('jquery'),
    Backbone = require('backbone'),
    loginView = require('./views/login/LoginView'),
    userActivitiesMainView = require('./views/dashboard/UserActivitiesMainView'),
    mainDashboardView = require('./views/dashboard/MainDashboardView');

var Router = Backbone.Router.extend({
    initialize: function (options) {
        this.options = options;
        this.currentView = null;
    },
    setCurrentView: function (view) {
        if (this.currentView &&
            typeof this.currentView.onClose != 'undefined') {
            this.currentView.onClose();
        }

        this.currentView = view;
        $('body').scrollTop(0);

    },
    routes: {
        "": "home",
        "login(/)": "home",
        "dashboard(/)": "dashboard",
    },
    notFound: function () {
        this.setCurrentView(null);
        $('.div-main').html('<h2>Oops! Page not found. Please try going back from the browser.</h2>');
    },
    dashboard: function () {
        "use strict";
        var dashboard = new mainDashboardView();
        this.setCurrentView(dashboard);
        this.addSideBar();
        this.addHeaderBar();
    },
    home: function () {
        "use strict";
        var login = new loginView();
        this.setCurrentView(login);
    },
    addSideBar: function () {
        var sidebar = new sidebarView();
        //this.setCurrentView(sidebar);
    },
    //Function to add header
    addHeaderBar: function () {
        var header = new headerView();
        //this.setCurrentView(header);
    }

})
module.exports = Router;


     var ret = Backbone.history.navigate('dashboard', true);
        console.log(ret); // comes false for me

我尝试了一切不起作用

编辑：

我在View中调用导航如下：

   events: function () {
    return this.appendEvents({
        'click #btnContinue': 'login'
    })
},
login: function () {
    var otp = this.$el.find('#otp').val();
    var data = {
        "mobile_number": sessionStorage.getItem('mobile_number'),
        "otp": otp,
        "name_of_user": "Vini",
        "flag": "payment_link",
        "title": "Pen and Pencil and rose",
        "description": "You can write and erase and smile and pay",
        "amount": "50.00",
        "images": [
            "ac19fa94-9f5f-48e0-93a7-53d5da616ac3",
            "13da680e-6050-40e0-97c8-cc141d1439d9"
        ]
    };
    this.loginModel.set(data);
    this.loginModel.save().then(function (response) {
        console.log(response);
        Cookies.set('API', response);
        var ret = Backbone.history.navigate('#dashboard', { trigger: true});
        console.log(ret);
    })
}

Answer 1

问题来自于在致电navigate之前致电Backbone.history.start()。

您在定义路由器后立即致电Backbone.history.navigate('dashboard', true)，但只能在文档Backbone.history.start()上致电ready。

    $(document).ready(function () {

        this.router = new Router();

        Backbone.history.start();

        // Initial navigate can be done here
        Backbone.history.navigate('dashboard', true);
        // or
        this.router.navigate('dashboard', true);
    });

此外，如果您想要点击链接，您可以将href属性用作任何其他链接标记。

<a href="#/dashboard">Dashboard</a>

如果你正在使用如下所示的片段路线，请不要忘记在所需路线前面navigate拨打#/。

http://example.com/page/#/fragment/route/here

Backbone.history.navigate无法正常工作

1 个答案: