Как изменить поведение кнопки jQuery mobile history Back

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

у меня есть Wine review webapp, который имеет следующий пользовательский поток представления: http://5buckchuck.com/

тип вина > винная карта > детали вина > обзор вина (перенаправление через django backto ) > детали вина обновлены из обзора

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

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

  1. соедините последние 3 элемента из стека истории, если последними элементами в стеке истории были Wine Review. Я с трудом пытался проанализировать последний объект истории, чтобы получить pageURL. У меня такое чувство, что это решение слишком хрупкое. хотя.

    var last_hist = $.mobile.urlHistory.getActive();
last_hist.data.pageURL;

  2. вторая мысль состояла в том, чтобы переопределить поведение кнопки "назад", чтобы кнопка "назад" из представления "детали вина" всегда возвращалась к представлению "винная карта"

    $('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);
   }
 });

нет кости, что-то вмешивается в транзакцию...

13
browser-history django javascript jquery-mobile

6 ответов

Я бы предпочел не соединять/pop / push с 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 кнопки назад и перенаправляет на нужную страницу. Вы также можете просто установить данные.toPage = winelist напрямую конечно.

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

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

3

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

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

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

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

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

$('#some_popup').popup( { history: false } );
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 таким образом, пользователь никогда не мог видеть своп. Надеюсь, это кому-то поможет.

0

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

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

плюсы:

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

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

-1