Возможно ли предотвратить изменение маршрутизатора, нажав кнопку «Назад»?

Question

Я создаю одну страницу с помощью BackboneJS, и мне нужно предотвратить запуск маршрутизатора на кнопке «Назад» в браузере. Чтобы быть точным, мне нужно показать подтверждение всплывающего окна с текстом «Вы действительно хотите выйти из комнаты? [Yes | no]». Поэтому, если пользователь нажимает yes, тогда действия по умолчанию должны произойти, но если no, то пользователь должен оставаться на текущем экране.

Использую Backbone.router с pushState: true. Предоставляет ли Backbonejs что-то вроде before событий маршрутизатора, чтобы предотвратить предотвращение обработки маршрутизатора или как я могу его архивировать?

Answer 1

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

Backbone.History.prototype.loadUrl = function (fragment, options) { 
    var result = true; 
    if (fragment === void (0) && options === void (0) && this.confirmationDisplay !== void(0)) 
    { 
     result = confirm('Are you sure you want to leave this room?'); 
    } 
    var opts = options; 
    fragment = Backbone.history.fragment = Backbone.history.getFragment(fragment); 
    if (result) { 
     this.confirmationDisplay = true; 
     return _.any(Backbone.history.handlers, function (handler) { 
      if (handler.route.test(fragment)) { 
       //We just pass in the options 
       handler.callback(fragment, opts); 
       return true; 
      } 
     }); 
    } 
    return this; 
} 

По существу проверки, если у нас есть фрагмент и варианты, если нет, то мы можем предположить, что приложение только начал, или пользователь нажал кнопку назад.

Answer 2

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

С асинхронным всплывающее окно (непроверенного кода, но должен работать)

Backbone.Route.extend({ 
    execute: function(callback,args){ 
    if(this.lastRoute === 'room'){ 
     showPopup().done(function(){ 
     callback & callback.apply(this,args); 
     }).fail(function(){ 
     Backbone.history.navigate('room/486',{trigger:false}); 
     }); 
    }else{ 
     callback && callback.apply(this,args); 
    } 
    }, 
    showPopup: function(){ 
    var html = "<<div><p>Do you really want to exit</p><button id='yes'>Yes</button><button id='no'>No</button></div>" 
    var promise = $.Deferred(); 
    $('body').append(html); 
    $(document).on('click','button#yes',function(){ 
     promise.resolve(); 
    }); 
    $(document).on('click','button#no',function(){ 
     promise.reject(); 
    }); 
    return promise; 
    } 
}); 

С синхронным подтверждающим всплывающих

Backbone.Route.extend({ 
    execute: function(callback,args){ 
    if(this.lastRoute === 'room'){ 
     var conf = confirm("Do you really want to exit the room ?"); 
     if(!conf){ 
     //Change the route back to room 
     Backbone.history.navigate('room/486',{trigger:false}); 
     return false; 
     } 
    }; 
    callback && callback.apply(this,args); 
    } 
}); 

Ссылки:

http://backbonejs.org/#Router-execute