如何在 Backbone.js 中跟踪路由器更改事件

Question

每次应用程序在 Backbone.js 中切换 URL 时，我都需要运行一个函数，并且我需要知道 URL 已更改为的主题标签。我假设有一个可以绑定的事件，但我无法弄清楚要绑定到哪个事件和哪个对象。

具体来说，我想将新 URL 发送到分析应用程序。

Answer 1

我知道这是一篇旧文章，但就像 @kirk 所建议的那样，Backbone.js 已经构建了它。

Backbone.history.on("all", function (route, router) {
    //console.log(window.location.hash);
});

我认为你最好使用这种方法。

Answer 2

@qwertymk 已经完成一半了。您可以在 window 对象上查找 hashchange 事件：

// jQuery example
$(window).bind('hashchange', function(){
    console.log(window.location.hash);
});

Answer 3

将其放在代码的顶部，

Backbone.History.prototype.navigate = _.wrap(Backbone.History.prototype.navigate, function(){
    // Get arguments as an array
    var args = _.toArray(arguments);
    // firs argument is the original function
    var original = args.shift();
    // Set the before event
    Backbone.history.trigger('before:url-change', args);
    // Call original function
    var res = original.apply(this, args);
    // After event
    Backbone.history.trigger('url-changed');
    // Return original result
    return res;
});

上面的代码将包装 History.navigate 函数，并在调用时触发“before:url-change”和“url-changed”

稍后您可以使用

Backbone.history.bind('before:url-change', function(path,e){
    console.log("before url change", path, e)
});

Answer 4

还有另一个“Backbone.history.on('route', ...)”事件，也可以工作，您可以发现它在库中被触发）：

Backbone.history.on('route', function() { debugger; });

它更精确，因为“all”是包罗万象的：
引用 Backbone 文档：

触发一个或多个事件，触发所有绑定的回调。除了事件名称之外，回调传递的参数与 trigger 相同（除非您正在监听 "all"，这将导致您的回调接收真实名称事件作为第一个参数）。

顺便说一句，Backbone 最佳实践是使用 ListenTo 方法，例如：

myView.listenTo(Backbone.history, 'route', function() { debugger; })

这样您就不需要手动清理事件侦听器 - 相反，它在逻辑上绑定到视图/模型/等。使用它的。