Question

我的backbone.js有三种观点：

类别列表
类别
个别项目的表格

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

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

用户打开类别列表。历史：“类别列表”（正确）
用户选择“我的类别”。历史：“我的类别”＆lt; “类别列表”（正确）
用户选择“我的项目”。历史：“我的项目”＆lt; “我的类别”＆lt; “类别列表”（正确）
用户填写表单并保存，重定向到“类别列表”。历史：“类别列表”＆lt; “我的项目”＆lt; “我的类别”＆lt; “类别列表”（应该只是“类别列表”）

另一个例子：

用户打开“我的类别”的网址
用户按下主页按钮。历史：“类别列表”＆lt; “我的类别”应为“类别列表”

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

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 - 自查看“类别列表”页面以来访问过的页数。

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

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

如果已经访问了“类别列表”页面，请在历史记录中返回相应数量的条目（不幸的是，这会将其他页面保留在历史记录中，因此您仍然可以继续查看它们）。否则，如果尚未访问“类别列表”页面，请导航至该页面，并确保不将当前页面添加到历史记录中。

Answer 2

无法从骨干历史记录中删除历史记录，您可以通过获取当前片段来添加一些逻辑来重新路由导航

或者您可以使用history.js（适用于大多数浏览器）

虽然https://developer.mozilla.org/en/DOM/window.history仅适用于Mozila firefox ，所以这对Android应用不起作用

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

2 个答案:

修改