如何保持一个干净的浏览器历史在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＆LT; - > 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:

• 用户打开类别列表。历史：分类目录（正确的）


• 用户选择我的类别。历史：我的类别＆LT; 分类表（正确的）


• 用户选择我的项目。历史：我的项目＆LT; 我的类别＆LT; 分类表（正确的）


• 用户填写表单并保存，被重定向到分类表。历史：分类列表＆LT; 我的项目＆LT; 我的类别＆LT; 分类列表（应该只是分类表）

另外一个例子：

• 用户打开我的类
的网址

• 用户presses home键。历史：分类列表＆LT; 我的类别，应该是类别列表

这是如何实现这一个干净的方式任何想法？

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.

有没有办法清除会话历史记录或禁用无特权从code后退/前进导航。最近的可用的解决方案是location.replace（）方法，它与提供的网址替换会话历史记录的当前项目。

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.

- <一href=\"https://developer.mozilla.org/en/DOM/window.history\">https://developer.mozilla.org/en/DOM/window.history

目前最好的，你可以使用 window.location.replace 或窗口被添加到浏览器的历史prevent当前页面。 history.replaceState 。 Backbone.js的提供通过调用这样一种便利的方法 router.navigate（片段[选项]）路由器对象，并指定在{更换：真正} 中的选项。

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...

由于它看来，分类列表页面的页面，历史应该是重置，我已经发布试图解决你所提到的这两个用例的解决方案。在code跟踪一个 historyState 变量，再presents时与其他网页后，参观了分类列表页面visitied为好

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 - 我们还没有访问类别列表页


• 如果 historyState 是 0 - 我们目前的类别列表页


• 如果 historyState 大于 0 - 因为看类别列表页页数访问


• 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屋！