骨干路由器未触发视图更改

Question

在过去的几天里，我一直在努力解决一个令人烦恼的问题，我终于承认失败，并呼吁这样做。

首先，我将概述我要做的事情，然后再详细说明遇到问题的地方。

目标：用户正在填写表单，并且如果表单上的任何元素发生更改，并且用户尝试不保存更改就离开表单 ，则应显示一个模态并显示以下消息：

您已对此记录进行了更改。 您要保存更改吗？

用户将获得是/否/取消选项。

如果用户选择：

是：记录应保存，然后导航至原始预期路线。

否：不应该保存记录，并且应该将用户导航到预期的路线。

取消：模式应该关闭，并且用户将保留在当前页面上，而不会更改路线。

我正在使用ribs.routefilter库在路由更改发生之前检测路由更改。

问题：

为了解决该问题，我在包含表单的视图中的initialize方法中放置了路由更改侦听initialize 。 下面是该代码：

// If the user tries go to a different section but the record has been changed, confirm the user action
    app.circulationRouter.before = function( route, params ) {
        app.fn.clearNotifications();
        if(app.recordChanged){
            var confirmView = new app.views.confirm({
                header:"Patron Record Changed",
                bodyText:"You have made changes to this record. Do you want to save the changes?",
                trueLabel:"Yes",
                falseLabel:"No",
                cancelLabel:"Cancel",
                hasTrue:true,
                hasFalse:true,
                hasCancel:true,
                trueCallback:function(){
                    // Ignore the patron record change
                    _this.saveRecord();

                    // Render the patron section AFTER the save
                    _this.model.on({
                        'saved' : function(){
                            // Render the new seciton
                            app.circulationRouter.renderPatronSection(_this.model, params[1]);
                            app.currentPatronSection = params[1];

                            // Set the record changed to false
                            app.recordChanged = false;

                            // Remove the 'before' listener from the circulationRouter
                            app.circulationRouter.before = function(){};

                            if(con)console.log('in saved');

                            // Remove the listener
                            _this.model.off('saved');
                        },
                        'notsaved' : function(){
                            // Stay on the patron record page, keep the url at record
                            app.circulationRouter.navigate("patrons/"+_this.model.get('PatronID')+"/record",false);
                            _this.model.off('notsaved');
                        }
                    }, _this);

                },
                falseCallback:function(){
                    if(con)console.log(params);
                    if(params.length){
                        // Ignore the patron record change
                        app.circulationRouter.renderPatronSection(_this.model, params[1]);
                        app.currentPatronSection = params[1];
                    }else{
                        if(con)console.log('blah');
                        setTimeout(function(){
                            if(con)console.log('should navigate');
                            app.circulationRouter.navigate("", true);
                        }, 5000);
                    }
                    app.recordChanged = false;
                    app.circulationRouter.before = function(){};
                },
                cancelCallback:function(){
                    // Stay on the patron record page, keep the url at record
                    app.circulationRouter.navigate("patrons/"+_this.model.get('PatronID')+"/record",false);
                }

            });
            app.el.append(confirmView.render().el);
            return false;
        }
    };

这三个选项中的每个选项都有一个回调，该回调在将控制结果的initialize函数内调用。 “ 取消”按钮的行为始终正确。 我遇到的问题是用户想要导航到主页时，即调用此行时： app.circulationRouter.navigate("", true); 。 如果有新的，已定义的导航路径，则其他所有内容均可正常工作。

以下是造成问题的事件顺序：

1）修改记录

2）尝试导航到主页

3）路线已更改主页路线，但记录仍在查看中

4）模式自动显示，带有三个选项

5）选择否按钮

6）触发falseCallback

7）模式已关闭，视图仍保留在记录页面上，但浏览器中显示的路由为主页

＃7的预期行为是显示主页视图，但是只有url可以反映出来。 您可以在falseCallback看到，我什至尝试延迟重定向的触发，以确保它不是DOM问题，但这没有用。

有人知道会发生什么吗？

Answer 1

这是问题所在。 更改路线后，即使您设置了参数{trigger:true} ，也要重新导航至同一条路线，页面也不会重新加载。 有一个关于它的长时间的讨论在这里 。

基于github中列出的讨论，我正在使用此解决方案并添加refresh选项。 如果将refresh选项设置为true，那么即使URL不变，视图也将重新加载。 否则，功能保持不变。

_.extend(Backbone.History.prototype, {
            refresh: function() {
                this.loadUrl(this.fragment);
            }
        });

var routeStripper = /^[#\/]/;
var origNavigate = Backbone.History.prototype.navigate;
Backbone.History.prototype.navigate = function (fragment, options) {
    var frag = (fragment || '').replace(routeStripper, '');
    if (this.fragment == frag && options.refresh)
        this.refresh();
    else
        origNavigate.call(this, fragment, options);
};