为刷新路由覆盖主干导航答案

【问题标题】：Overriding Backbone Navigate for Refresh Routes为刷新路由覆盖主干导航
【发布时间】：2014-09-26 12:18:45
【问题描述】：

这是discussed a lot before，在特定级别上，但我还没有找到一个好的方法来覆盖将主干路由导航到相同哈希路由的一般情况。甚至还有一些关于why this is a bad idea的讨论，这就是为什么Backbone won't change their approach，despite lots of requests。

具体来说，我有几个在 Backbone 应用程序中显示数据的实例（在模式/对话框/弹出框中），这些实例可以在不更改路径的情况下关闭。在这些情况下，我会继续手动“调整”路径，以免刷新页面并以传统方式导航。

不幸的是，Backbone has some specific code 避免了这种用例，所以我想扩展 Backbone 以允许这些请求，而不需要任何处理程序响应路径更改的点击。也就是说，我想保持 Backbone View 的 DRY 并且不 manually call a navigate，而只使用 HTML href="#path"。

因此，本质上，我正在尝试创建一个 Backbone 扩展，将它们的默认导航方法覆盖为我们自己的。我发现this example 我尝试更新但没有成功。除非有任何加载顺序问题，我觉得它应该可以工作，但似乎永远无法触发该代码。

      _.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)
            this.refresh();
        else
            origNavigate.call(this, fragment, options);
    };

目前，我已经运行了一些特定的点击处理程序，它们仅在 Backbone 没有响应时才响应，但这不符合我的代码嗅觉标准：

AView = Backbone.Marionette.ItemView.extend({
  template: HandlebarsTemplates['a/template'],
  initialize: function (data) {
    ...
  },
  events: {
    'click a[href]': function(event) {
      var routeStripper = /^[#\/]/;
      var new_frag = ($(event.target).attr("href") || '').replace(routeStripper, '');
      if(new_frag == Backbone.history.getFragment()) {
        Backbone.history.loadUrl(Backbone.history.getFragment());
      }
    }
  },
});

有没有人有任何功能模式来解决这个令人费解的极端情况？

【问题讨论】：

标签： backbone.js marionette

【解决方案1】：

在解决这个单一问题非常令人沮丧的 3 天之后，我已经解决了我无法覆盖 Backbone.history，由于它是奇怪的启动模式，我有限的 JavaScript 技能不熟悉，或者我们正在使用 Marionette 的事实AppRouter 出于某种原因不接受覆盖。

无论哪种方式，这个问题都通过手动关闭模态而不导航到非模态哈希来表现出来。这已通过在非模态哈希上手动调用导航并将窗口重新定位到之前的位置来纠正（没有注意到闪烁或可见的重绘）。

一些代码：

var scrolled_top = window.parent.pageYOffset || window.parent.document.documentElement.scrollTop;
var scrolled_left = window.parent.pageXOffset || window.parent.document.documentElement.scrollLeft;
App.router.navigate('');
window.parent.scrollTo(scrolled_left, scrolled_top); //reset screen location after navigation sets it to top of new view

【讨论】：