Как сохранить чистую историю браузера в приложении backbone.js? - PullRequest
Новая
       30

Как сохранить чистую историю браузера в приложении backbone.js?

10 голосов
/ 28 марта 2012

Мой backbone.js имеет три вида:

  1. Список категорий
  2. Список товаров в категории
  3. Форма для индивидуального товара

Я использую роутер backbone.js для навигации между этими представлениями. Пользовательские потоки в приложении идут 1 <-> 2, 2 <-> 3 и 3 -> 1. Пользователь может перемещаться назад и вперед с помощью кнопок браузера «назад» и «вперед», что является желаемым поведением. Работает также глубокая ссылка на любой предмет.

Проблема в том, что я хочу сохранить историю в чистоте. Вот пример потока использования:

  • Пользователь открывает список категорий. История: «Список категорий» (правильный)
  • Пользователь выбирает «Моя категория». История: «Моя категория» <«Список категорий» (правильно) </li>
  • Пользователь выбирает «Мой товар». История: «Мой товар» <«Моя категория» <«Список категорий» (правильно) </li>
  • Пользователь заполняет форму и сохраняет ее, перенаправляется в «Список категорий». История: «Список категорий» <«Мой элемент» <«Моя категория» <«Список категорий» (должен быть просто «Список категорий») </li>

Другой пример:

  • Пользователь открывает ссылку "Моя категория"
  • Пользователь нажимает кнопку «Домой». История: «Список категорий» <«Моя категория», должно быть «Список категорий» </li>

Любые идеи о том, как реализовать это в чистом виде?

Ответы [ 2 ]

12 голосов
/ 31 марта 2012

Невозможно реализовать первый приведенный вами пример. Вы не можете реализовать первый пример, потому что нет способа «удалить» историю браузера, используя 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} в опциях.

Вместо того чтобы полагаться на разные маршруты для определения того, какой вид отображать, я бы вместо этого попытался написать главный вид, который мог бы обрабатывать показ / скрытие определенных видов.

EDIT

Хорошо, входим на хакерскую территорию ...

Поскольку кажется, что страница «Список категорий» - это страница, на которой следует «сбрасывать» историю, опубликованное мною решение пытается решить оба варианта использования, которые вы упомянули. Код отслеживает переменную 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});  
  } 
}

Если страница «список категорий» уже посещена, вернитесь в историю на соответствующее количество записей (это, к сожалению, сохраняет другие страницы в истории, поэтому вы все еще можете перейти к ним). В противном случае, если страница «список категорий» еще не посещена, перейдите к ней и не добавляйте текущую страницу в историю.

0 голосов
/ 15 марта 2017

Нет способа удалить историю из истории магистрали, вы можете перенаправить навигацию, добавив некоторую логику, получив текущий фрагмент

или вы можете использовать history.js (работает в большинстве браузеров)

, в то время как https://developer.mozilla.org/en/DOM/window.history только для Mozila firefox , поэтому это не работает для приложения для Android

...