javascript - 防止用户离开未保存的更改

Question

我目前正在使用 Backbone.Marionette 创建 SPA，在其中一个 View 中，用户可以导航离开未保存的更改。我可以控制其中一些事件，例如 View 中的按钮和菜单选项，它们会带走用户，但其他一些事件需要操作 Backbone.Router 或直接使用 DOM 事件。

我已经尝试收听 beforeunload(不起作用，因为应用程序仍在加载)和 hashchange(不起作用，因为您无法阻止浏览器导航离开)。这些解决方案(1、2、3)在这种情况下不起作用，Javascript 永远不会被卸载。

更改 Backbone.Router 似乎是最好的选择，但由于它的初始化方式，我认为引入此功能是不可能的，或者至少我找不到实现它的方法。 This solution ，例如，不起作用，因为 hashchange 不可取消(您不能对其调用 stopPropagation)，并且 this other solution不起作用，因为 navigate 未在 Backbone.Router 对象上定义。

有什么建议吗？

Answer 1

尽管还需要做更多的工作，但我已经设法找到了解决方案。对于此解决方案，我假设您在 View 变脏时进行跟踪。

移出 View 主要有4种方式；

1. 单击 View 上的链接
2. 点击 View 外的链接
3. 点击刷新或外部链接
4. 点击浏览器的后退/前进

<强>1。申请链接

这是最简单的情况。当你点击你自己的链接时，你必须检查你的 View 是否脏了。例如，我有一个由 historyBack 函数处理的应用内后退按钮。在 View 上:

historyBack: function() {
    if (this.isDirty) {
         answer = confirm("There are unsaved changes.\n\nDo you wish to continue?")

        if (answer) {
            this.isDirty = false
            window.history.back()
        }
    }

    else {
        window.history.back()
    }
}

<强>2。在您的视野之外的链接

这种类型的交互可以通过扩展 Router 原型(prototype)的 execute 方法来处理，而不是其他地方提出的 navigate 方法。

应该有一个变量可以被 Router 访问，用来存储 View 的状态。就我而言，我正在使用路由器本身，并且每次更改 View 上的脏标志时都会更新此变量。

代码应该是这样的:

_.extend(Backbone.Router.prototype, {

    execute: function (callback, args, name) {
        if (Backbone.Router.isDirty) {
            answer = confirm "There are unsaved changes.\n\nDo you wish to continue?";

            if (!answer) {
                return false;
            }
        }

        Backbone.Router.isDirty = false
        if (callback) callback.apply(this, args) 
    }
}

<强>3。刷新或外链

刷新和外部链接实际上卸载了您的 Javascript，因此此处基于 beforeunload 的解决方案(参见问题)实际上有效。无论你在哪里管理你的 View ，我都会使用一个 Controller ，但我们假设它在同一个 View 上，你在展示时添加一个监听器并在销毁时将其删除:

onShow: function() {
    $(window).bind("beforeunload", function (e) {
        if (this.isDirty) {
             return "There are unsaved changes.";
        }
    }
}

onDestroy: function() {
    $(window).unbind("beforeunload");
}

<强>4。在浏览器上后退/前进

这是最棘手的案例，也是我尚未完全弄清楚的案例。后退/前进时，用户可以导航出应用程序或在应用程序内导航，这两种情况都包含在 1 和 3 的代码中，但有一个问题我无法弄清楚，我将为此创建另一个问题.

当点击后退/前进时，浏览器在调用路由器之前更改地址栏，因此您最终会遇到不一致的状态:地址栏显示到应用程序状态的不同路径。这是个大问题，如果用户在保存或放弃更改后再次点击后退按钮，她将被带到另一条路线，而不是之前的路线。

其他一切正常，它会显示一个弹出窗口，询问用户是想离开还是继续，如果用户选择留下，则不会重新加载 View 。