如何在backbone.js 应用程序中保持干净的浏览器历史记录? [英] How to keep a clean browser history in a backbone.js app?

问题描述

我的backbone.js有三个视图:

My backbone.js has three views:

1. 类别列表
2. 类别中的项目列表
3. 单个项目的表格

我使用backbone.js 路由器在这些视图之间导航.应用程序中的用户流程为 1<-->2、2<-->3 和 3 --> 1.用户可以使用浏览器的后退和前进按钮来回导航，这是需要的行为.与任何项目的深层链接也有效.

I'm using backbone.js router to navigate between these views. The user flows in the app go 1<-->2, 2<-->3 and 3 --> 1. The user can navigate back and forth using browser back and forward buttons, which is wanted behavior. Deep linking to any item works also.

问题是我想保持历史干净.下面是一个示例使用流程:

The problem is that I want to keep the history clean. Here's an example usage flow:

• 用户打开类别列表.历史记录:类别列表"(正确)
• 用户选择我的类别".历史记录:我的类别"<类别列表"(正确)
• 用户选择我的项目".历史记录:我的项目"<我的类别"<类别列表"(正确)
• 用户填写表单并保存，重定向到类别列表".历史记录:类别列表"<我的项目"<我的类别"<类别列表"(应该只是类别列表")

另一个例子:

• 用户打开我的类别"的网址
• 用户按下主页按钮.历史记录:类别列表"<我的类别"，应该是类别列表"

关于如何以干净的方式实现这一点的任何想法?

Any ideas on how to implement this in a clean way?

推荐答案

无法实现您提供的第一个示例.您无法实现第一个示例，因为无法删除"使用 Javascript 的浏览器历史记录.

There is no way to implement the first example that you provided. You cannot implement the first example because there is no way to "delete" the browser history using Javascript.

无法清除会话历史记录或禁用非特权代码的后退/前进导航.最接近的可用解决方案是 location.replace() 方法，该方法将会话历史记录的当前项目替换为提供的 URL.

There is no way to clear the session history or to disable the back/forward navigation from unprivileged code. The closest available solution is the location.replace() method, which replaces the current item of the session history with the provided URL.

- https://developer.mozilla.org/en/DOM/window.history

您最多可以通过使用window.location.replace 或window.history.replaceState 来防止当前页面被添加到浏览器历史记录中.Backbone.js 通过在路由器对象上调用 router.navigate(fragment, [options]) 并在选项中指定 {replace: true} 提供了一种方便的方法.

At best you can prevent the current page from being added to the browser history by using window.location.replace or window.history.replaceState. Backbone.js provides a convenient way of doing this by calling router.navigate(fragment, [options]) on your router object and specifying {replace: true} in the options.

我不会依赖不同的路由来确定要显示哪个视图，而是尝试编写一个可以处理显示/隐藏特定视图的主视图.

Instead of relying on different routes to determine which view to display, I would try instead writing a master view which could handle showing/hiding the specific views.

好的，进入黑客领域...

Ok, entering hacky territory...

因为看起来类别列表"page 是历史记录应该重置"的页面，我发布的解决方案试图解决您提到的两个用例.该代码跟踪 historyState 变量，该变量表示类别列表"何时出现.页面以及之后访问的其他页面.

Since it seems that the "Category List" page is the page where history should be "reset", the solution I have posted attempts to solve both use cases you have mentioned. The code keeps track of a historyState variable, which represents when the "category-list" page is visitied as well as the other pages visited after it.

// in your application init...
$(function(){
    window.historyState = -1;
    router = new Backbone.Router({ 
        routes: {
            "category-list": category-list,
            "category": category,
            "item": item
        }
        
        category-list: function(){
            historyState = 0;
        },
        
        category: function(){
            if(historyState >= 0)
                historyState++;
        },
        
        item: function(){
            if(historyState >= 0)
                historyState++;
        }
    });
});

• 如果 historyState 是 -1 - 我们还没有访问过category-list"；页面.
• 如果 historyState 是 0 - 我们当前在类别列表"上页面.
• 如果 historyState 大于 0 - 自查看category-list"后访问的页面数；页面.
• If historyState is -1 - we have not yet visited the "category-list" page.
• If historyState is 0 - we are currently on the "category-list" page.
• If historyState is greater 0 - number of pages visited since viewed "category-list" page.

现在任何时候都可以使用链接导航到类别列表"页面，确保它调用以下方法来处理相应的导航.

Now anytime a link is used to navigate to the "category-list" page, make sure it calls the following method to handle the appropriate navigation.

function routeToCategoryList(){
  if( historyState > 0 ){ 
    // 'category-list' already exists in our history route to that page.
    window.history.go((historyState * -1));
  } else {  
    // otherwise, don't store an entry for the current page we are on.
    router.navigate("/category-list", {trigger: true, replace: true});  
  } 
}

如果类别列表"页面已被访问，则返回历史记录中适当数量的条目(不幸的是，这会将其他页面保留在历史记录中，因此您仍然可以继续访问它们).否则，如果尚未访问类别列表"页面，请导航到该页面，并确保不要将当前页面添加到历史记录中.

If the 'category-list' page has already been visited go back in history the appropriate number of entries (this unfortunately keeps the other pages in the history, so you can still go forward to them). Otherwise if the 'category-list' page hasn't been visited yet navigate to it and be sure not to add the current page to the history.

这篇关于如何在backbone.js 应用程序中保持干净的浏览器历史记录?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！