如何为单页应用程序实现 isDirty 标志 onLeave

How to implement a isDirty flag onLeave for a single page application?

本文关键字:isDirty 标志 onLeave 实现 应用程序 单页      更新时间:2023-09-26

我有一个用MVC4编写的单页应用程序,它使用pjax((将html推送到我的页面中的各种s中。 我有一个允许用户编辑数据的子表单,如果用户更改数据,则会在javascript中设置isDirty 标志,以触发页面底部的警报,指出有未保存的更新。 我还想在用户尝试离开页面而不保存时实现额外的警告。 如果我使用像这样的传统 onbeforeunload 函数

window.onbeforeunload = function() {
    if (isDirty) {
        return 'You have unsaved changes!';
    }
    return null;
};

如果我尝试关闭页面或完全离开网站,它会调用警报,但如果用户单击我的一个链接,该链接使用一些不同的信息重新填充它不会触发,因为您实际上并没有离开页面。 如何构建它,以便这些 pjax(( 链接之一导致类似于关闭页面的警报?

您可以订阅在 pjax 请求之前触发的全局事件:

$(document).on('pjax:beforeSend', function() { 
    if (isDirty) {
        return confirm('You have unsaved changes! Are you sure you want to continue?');
    }
    return true;
});

可以将委托的事件处理程序添加到页面中的链接上。您只需要确保处理程序绑定到可能加载"新页面"的链接。