javascript - 在backbone.js中切换 View 时检查未保存的更改

Question

我是 Javascript 和backbone.js 的新手，所以希望我在这里遗漏了一些简单的东西。我正在试验一些示例代码，我发现这些代码应该在允许用户导航到另一个页面之前检查未保存的更改。我在这里创建了一个 JSfiddle:

http://jsfiddle.net/U43T5/4/

代码订阅 hashchange 事件，如下所示:

$(window).on("hashchange", router.hashChange);

并且router.hashChange函数检查“脏”标志以确定是否允许导航，如下所示:

hashChange: function (evt) {
    if (this.cancelNavigate) { // cancel out if just reverting the URL
        evt.stopImmediatePropagation();
        this.cancelNavigate = false;
        return;
    }
    if (this.view && this.view.dirty) {
        var dialog = confirm("You have unsaved changes. To stay on the page, press cancel. To discard changes and leave the page, press OK");
        if (dialog == true) return;
        else {
            evt.stopImmediatePropagation();
            this.cancelNavigate = true;
            window.location.href = evt.originalEvent.oldURL;
        }
    }
},

问题是代码无法工作，因为 this.view 是 未定义，因此永远不会输入第二个 if block 。

我希望示例程序在离开页面之前始终要求确认(在我的示例程序中，我已将 this.view.dirty 设置为始终 true，这就是为什么它应该总是要求确认)。或者如果有更好的方法，我愿意接受替代方案。

Answer 1

主要问题是this方法中的上下文，this对应于窗口对象，而不是路由器。因此，当您在路由器上定义 View 时，它始终保持未定义状态。声明一个初始化方法，将方法内的上下文绑定(bind)到路由器。

 initialize: function() {
        _.bindAll(this, 'loadView', 'hashChange');
    },

<强> Check Fiddle