Question

我正在尝试在back和forward的骨干网页应用中使用history.pushState和router.navigate按钮。

我一切正常，直到我意识到在苹果产品（MAC，iPhone，iPad）上popstate事件在页面加载时被触发！恶梦！

所以我一直在努力让一切正常工作，我已阻止popstate在页面加载时触发并设法让back和forward按钮起作用，但遗憾的是他们不会在第一次点击时工作。我已经找到了原因，但我不知道如何解决它！

以下是一些代码：

window.onpopstate = function (event) {
    Backbone.trigger('popstate', event);
};

以上代码用于在popstate事件触发时触发我的主干功能。

ContainerView = Backbone.View.extend({
    el: 'body',
    events: {
        ...
    },
    initialize: function() {        
        ...
        ...
        this.listenTo(Backbone, 'popstate', this.onPopState);
    },
    onPopState: function(event) {
        app.popStateTriggered = true;
        if (event.state && _.keys(event.state).length > 0) {
            var pathName = window.location.pathname;
            var pageName = "index.php";
            if(pathName.indexOf(".php") > -1) {
                var pageName = pathName.substring(pathName.lastIndexOf('/') + 1, pathName.lastIndexOf('php') + 3);
            }
            $('.navigation-item[href="'+pageName+'"]').eq(0).click();
        }
    },
    ...

上面的代码监听popsate的触发器并运行onPopState函数。 onPopState函数读取以查看是否已传递event.stat e，这是我阻止代码在页面加载时运行的方式，如果有event.status则代码运行并加载请求的视图。

window.history.pushState({ customState: pageUrl }, pageName, pageUrl);

以上是我的pushState功能。

我的问题在于，当我第一次按下后退按钮event.stats = undefined（BAD），然后按下后退按钮event.status = object{ customState: "index.php" }（GOOD）的第二次按下时。但为什么这只能在第二次工作，我无法解决，它让我疯狂！

如果有人能提供帮助那就太棒了！

修改

这是我的路由器：

var app = app || {};

(function($) {

    var Router = Backbone.Router.extend({
        routes: {
            '': 'instantiateHome',
            'index.php': 'instantiateHome',
            'our-approach.php': 'instantiateOurApproach',
            'our-work.php': 'instantiateOurWork',
            'people.php': 'instantiatePeople',
            'social.php': 'instantiateSocial',
            'contact-us.php': 'instantiateContactUs',
            "*notFound" : 'notFound'
        },
        instantiateHome: function() {
            if (app.ajaxActive) {... // instantiateView()}
        },
        instantiateOurApproach: function() {
            ... // instantiateView()
        },
        instantiateOurWork: function() {
            ... // instantiateView()
        },
        instantiatePeople: function() {
            ... // instantiateView()
        },
        instantiateSocial: function() {
            ... // instantiateView()
        },
        instantiateContactUs: function() {
            ... // instantiateView()
        },
        notFound: function() {
            ... // instantiateView()
        }
    });

    app.router = new Router();

    var location_pathname = window.location.pathname;
    var site_url = location_pathname.replace(location_pathname.split("/").pop(),"");
    var urlArray = location_pathname.split("/");
    var pageUrl = urlArray[urlArray.length-1];
    if (Modernizr.history) {
        Backbone.history.start({pushState: true, root: site_url});
    } else {
        Backbone.history.start({hashChange: false, root: site_url});
    }

    app.router.navigate(pageUrl, {trigger: true});

    history.replaceState({ customState: true });

})(jQuery);

History.pushState仅用于带有主干的第二个后退按钮

0 个答案: