如何在backbone.js应用程序中保持干净的浏览器历史记录？

Question

我的backbone.js有三个视图:

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

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

问题是我想保持历史清洁.这是一个示例用法流程:

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

另一个例子:

• 用户打开"我的类别"的URL
• 用户按下主页按钮.历史:"类别列表"<"我的类别",应该是"类别列表"

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

Answer 1

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

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

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

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

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

编辑

好的,进入hacky领域......

由于"类别列表"页面似乎是"重置"历史记录的页面,因此我发布的解决方案尝试解决您提到的两种用例.代码跟踪historyState变量,该变量表示访问"类别列表"页面以及其后访问的其他页面.

// 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- 我们还没有访问过"类别列表"页面.
• 如果historyState是0- 我们目前在"类别列表"页面上.
• 如果historyState更大0- 自查看"category-list"页面以来访问过的页数.

现在,只要使用链接导航到"类别列表"页面,请确保它调用以下方法来处理相应的导航.

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});  
  } 
}

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