Question

我正在使用Sammy.js作为我的单页应用。我想创建类似于SO的功能（当您输入问题并尝试离开页面时它会询问您是否确定）。

如果它不是单页应用程序，我会做类似的事情：

$(window).bind('beforeunload', function(){
  return 'Are you sure you want to leave?';
});

问题是，在单页面应用中，用户实际上并没有离开页面，而是更改了他的document.location.hash（他可以通过关闭页面离开页面）。有没有办法为SPA制作类似的东西，最好是用sammy.js？

Answer 1

我的单页Webapp在我的工作中遇到了类似的问题。我们有一些页面可能很脏，如果它们是，我们希望阻止导航远离该页面，直到用户验证它可以这样做。由于我们想要阻止导航，我们无法监听onhashchange事件，该事件在更改哈希之后触发，而不是之前触发。因此，我们决定覆盖默认的LocationProxy以包含允许我们在位置更改之前选择性地阻止导航的逻辑。

考虑到这一点，这是我们使用的代理：

PreventableLocationProxy = (function () {
    function PreventableLocationProxy(delegateProxy, navigationValidators) {
        /// <summary>This is an implementation of a Sammy Location Proxy that allows cancelling of setting a location based on the validators passed in.</summary>
        /// <param name="delegateProxy" type="Sammy.DefaultLocationProxy">The Location Proxy which we will delegate all method calls to.</param>
        /// <param name="navigationValidators" type="Function" parameterArray="true" mayBeNull="true">One or more validator functions that will be called whenever someone tries to change the location.</param>
        this.delegateProxy = delegateProxy;
        this.navigationValidators = Array.prototype.slice.call(arguments, 1);
    }

    PreventableLocationProxy.prototype.bind = function () {
        this.delegateProxy.bind();
    };

    PreventableLocationProxy.prototype.unbind = function () {
        this.delegateProxy.unbind();
    };

    PreventableLocationProxy.prototype.getLocation = function () {
        return this.delegateProxy.getLocation();
    };

    PreventableLocationProxy.prototype.setLocation = function (new_location) {
        var doNavigation = true;
        _.each(this.navigationValidators, function (navValidator) {
            if (_.isFunction(navValidator)) {
                // I don't just want to plug the result of the validator in, it could be anything!
                var okayToNavigate = navValidator(new_location);
                // A validator explicitly returning false should cancel the setLocation call. All other values will
                // allow navigation still.
                if (okayToNavigate === false) {
                    doNavigation = false;
                }
            }
        });
        if (doNavigation) {
            return this.delegateProxy.setLocation(new_location);
        }
    };

    return PreventableLocationProxy;
}());

这段代码本身非常简单，它是一个javascript对象，它接受一个委托代理，以及一个或多个验证器函数。如果这些验证器中的任何一个显式返回false，则会阻止导航并且位置不会更改。否则，允许导航。为了使这项工作，我们必须覆盖我们的锚标签的默认onclick处理，以通过Sammy.Application.setLocation路由它。但是，一旦完成，这就干净地允许我们的应用程序处理脏页面逻辑。

为了更好的衡量，这是我们的脏页验证器：

function preventNavigationIfDirty(new_location) {
    /// <summary>This is an implementation of a Sammy Location Proxy that allows cancelling of setting a location based on the validators passed in.</summary>
    /// <param name="new_location" type="String">The location that will be navigated to.</param>
    var currentPageModels = [];
    var dirtyPageModels = [];
    //-----

    // Get the IDs of the current virtual page(s), if any exist.
    currentPageModels = _.keys(our.namespace.currentPageModels);

    // Iterate through all models on the current page, looking for any that are dirty and haven't had their changes abored.
    _.forEach(currentPageModels, function (currentPage) {
        if (currentPage.isDirty() && currentPage.cancelled === false) {
            dirtyPageModels.push(currentPage);
        }
    });

    // I only want to show a confirmation dialog if we actually have dirty pages that haven't been cancelled.
    if (dirtyPageModels.length > 0) {
        // Show a dialog with the buttons okay and cancel, and listen for the okay button's onclick event.
        our.namespace.confirmDirtyNavigation(true, function () {
            // If the user has said they want to navigate away, then mark all dirty pages with the cancelled
            // property then do the navigating again. No pages will then prevent the navigation, unlike this
            // first run.

            _.each(dirtyPageModels, function (dirtyPage) {
                dirtyPage.cancelled = true;
            });

            our.namespace.sammy.setLocation(new_location);
        });

        // Returns false in order to explicitly cancel the navigation. We don't need to return anything in any
        // other case.
        return false;
    }
}

请记住，如果用户明确更改位置，此解决方案将无效，但这不是我们想要支持的用例。希望这能让您更接近自己的解决方案。

阻止用户使用hashbang将路由保留在单页应用程序中

1 个答案: