Как изменить историю мобильных jQuery Назад поведение кнопки

Я начну с этого, я немного научился, но решение, которое решает, похоже, должно быть простой модификацией JQM.

У меня есть веб-приложение для проверки вина, которое имеет следующий поток пользователей просмотра: http://5buckchuck.com/

Тип винa > Винная картa > Информация о винах > Обзор вин (перенаправление через back-back) > Информация о винах, обновленная из обзора

То, что я хочу сделать, - это когда пользователь нажимает кнопку "Назад" , он должен вернуться к списку вин. В настоящее время происходит просмотр загрузки Wine Detail. Он возвращается три раза назад, чтобы вернуться к списку вин.: - (

Мои мысли решить это были два:

Соедините последние 3 элемента из стека истории, если последние элементы в стеке истории были просмотрены Wine. Мне было трудно попытаться представить последний объект истории, чтобы получить страницуURL. У меня есть ощущение, что это решение немного хрупко, хотя.
```
var last_hist = $.mobile.urlHistory.getActive();
last_hist.data.pageURL;
```
Вторая мысль заключалась в том, чтобы переопределить поведение кнопки "Назад" , чтобы кнопка "Назад" в представлении "Винная деталь" всегда возвращалась в вид списка вин.
```
$('div#wine_detail').live('pageshow',function(event, ui){      
  $("a.ui-btn-left").bind("click", function(){
    location.replace("/wines/{{wine.wine_type}}/#");
  });   
});
```

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

Обновление: Поэтому я продолжаю взламывать это с незначительными результатами. На том, что я нашел, это то, что я в основном должен работать: window.history.go(-3)

с консоли он делает именно то, что мне нужно.

Итак, я попробовал привязать его к задней кнопке:

$('div#wine_detail').live('pageshow',function(event, ui){
  var last = $.mobile.urlHistory.stack.length - 1;
  var last_url = $.mobile.urlHistory.stack[last].url;
  var review_url = /review/g;
   if (last_url.match(review_url) )
     {
       $('div#wine_detail a.ui-btn-left').bind( 'click', function( ) {  
         console.log("click should be bound and going back in time...")
         window.history.go(-2);
         });
   }
   else
   {
     console.log('err nope its: ' + last_url);
   }
 });

Нет кубиков, что-то перехватывает транзакцию...

Ответы

Ответ 1

Хорошо, поэтому решение было близко к обновлению, которое я опубликовал. Проблема с предыдущим решением заключалась в том, что многие кнопки привязывались к кнопке "Назад". Хотя мое новое действие привязки, возможно, работало иногда, другие действия также имели место, я пробовал unbind(), но все же не работал.

Мое решение - это немного дыма и зеркал. Я проверяю, была ли предыдущая страница страницей просмотра, а затем, если это так, я поменяю прежнюю кнопку возврата для моей новой кнопки faux со следующим шагом истории:

$('div#wine_detail').live('pageshow',function(event, ui){
  var last = $.mobile.urlHistory.stack.length - 1;
  var last_url = $.mobile.urlHistory.stack[last].url;
  var review_url = /review/g;
  if (last_url.match(review_url) )
    {
      $('a.ui-btn-left').replaceWith('<a href="" id="time_machine" class="ui-btn-left ui-btn ui-btn-icon-left ui-btn-corner-all ui-shadow ui-btn-up-a" data-icon="arrow-l"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Back</span><span class="ui-icon ui-icon-arrow-l ui-icon-shadow"></span></span></a>');

      $('#time_machine').bind( 'click', function( ) {  
        console.log("click should be bound and going back in time...")
        window.history.go(-3);
        });
    }
  else
    {
      console.log('err nope its: ' + last_url);
    }

Это выглядит точно так же, и никто не мудрее. его можно было бы улучшить, используя метод jQm pagebeforeshow, чтобы пользователь не мог видеть своп. Надеюсь, это поможет кому-то.

Ответ 2

Я бы предпочел не объединять/поп/толчок с urlHistory. Как насчет переадресации на pagebeforechange следующим образом:

$(document).on("pagebeforechange", function (e, data) {

    var overrideToPage;

    // some for-loop to go through the urlHistory TOP>DOWN
    for (var i = $.mobile.urlHistory.activeIndex - 1; i >= 0; i--) {
        // this checks if # = your target id. You probably need to adapt this;
        if ($.mobile.urlHistory.stack[i].url = $('#yourPageId').attr('id')) {
            // save and break
            overrideToPage = $.mobile.urlHistory.stack[i].url;
            break;
        }
        // set new Page
        data.toPage = overrideToPage;
    }
});

Это фиксирует ваш звонок на кнопке changePage и перенаправляет на нужную страницу. Вы также можете просто установить data.toPage = winelist напрямую.

Я делаю это только С# внутренними страницами, но не так сложно установить это с помощью winelist.html и т.д.

Для получения дополнительной информации проверьте страницу событий в JQM docs

Ответ 3

Почему у вас нет кнопки "Назад" в разделе заголовка вашей страницы? Что-то вроде этого:

<div data-role="header">
    <a data-direction="reverse" data-role="button" href="#winelist" data-icon="back">Back</a>
    <h1>Wine Detail</h1>
</div><!-- /header -->

Ответ 4

Я тоже боролся с этим недавно. Подумав об этом, я понял, что могу переписать приложение JQM для использования "всплывающих окон" для тех страниц, которые мне не нужны в моей истории. Это стало проще и чище, чем обманывать историю браузеров.

Теперь пользователи могут интуитивно использовать кнопку "Назад" браузера, и мне не нужно закодировать обратные кнопки приложения.

Единственное, что вы должны убедиться, это то, что всплывающие окна сами не попадают в историю браузера, поэтому обязательно установите для параметра "история" значение false:

$('#some_popup').popup( { history: false } );

Ответ 5

Если у вас есть ситуация, когда кнопка закрытия ссылается на произвольную (не последнюю) страницу, вы также можете перенести ее на целевую страницу и затем открыть диалог. Поэтому кнопка закрытия в диалоговом окне откроет целевую страницу.

// First: change to the target page
$.mobile.changePage('#target_page');

После этого откройте диалоговое окно, подобное этому.

// Second: change to the dialog 
window.setTimeout(
   // for some reason you have to wrap it in a timeout  
   function(){
      $.mobile.changePage('#dialog');
   },
   1
);

Теперь вы можете открыть диалоговое окно, и кнопка закрытия откроет #target_page.

Преимущества:

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

Ответ 6

Я видел подобные проблемы до использования jQuery mobile, и он рассматривается в документации. При настройке своего Javascript "в начале вашей страницы" используйте pageinit вместо того, чтобы готово или, возможно, в вашем случае делать страницы. Я думаю, что это будет решать вашу проблему без необходимости обхода очереди истории.