Question

我正在使用BackboneJS构建单页，我需要阻止路由器在浏览器中的后退按钮上执行。确切地说，我需要显示确认自定义弹出窗口，文本“你真的想要退出房间吗？[是|否]”。因此，如果用户点击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

Backbone路由器有一个执行方法，每次路由更改都会调用，我们可以返回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

是否可以通过单击后退按钮来防止更改路由器？

2 个答案: