在Backbone应用中如何刷新页面

Question

我正在使用backbone构建我的网页应用。

目前我面临的问题是，如果我在主页上，我无法通过再次点击“主页”按钮来刷新同一页面。

我相信这是backbone提供的限制（如果调用相同的URL，则不重新加载页面）

有没有什么方法可以解决这个问题？也就是说，当我再次点击主页按钮时，可以触发页面重新加载，即再次调用相同的URL？

- Zhen

Answer 1

你正在寻找 Backbone.history.loadUrl。 来自注释源码：

尝试加载当前的URL片段。如果路由成功匹配，则返回true。如果没有定义的路由与片段匹配，则返回false。

因此，对于一个简单的刷新链接，你可以将以下事件添加到你的Backbone.View:

events: {
  'click a#refresh': function() {
    Backbone.history.loadUrl();
    return false;
  }
}

- amiuhle

---

这是一个更好的答案：更短，更干净，而且不涉及与Backbone的“内部”（Backbone.history.fragment）交互。 - machineghost

Answer 2

从backbone.js的源代码来看，默认情况下似乎不可能实现这一点，因为它只响应URL的更改。而且，由于点击相同的链接，您不会触发change事件。

Backbone.History中的代码：

$(window).bind('hashchange', this.checkUrl);

你需要自己处理不变的情况。这是我所做的：

$('.nav-links').click(function(e) {
    var newFragment = Backbone.history.getFragment($(this).attr('href'));
    if (Backbone.history.fragment == newFragment) {
        // need to null out Backbone.history.fragement because 
        // navigate method will ignore when it is the same as newFragment
        Backbone.history.fragment = null;
        Backbone.history.navigate(newFragment, true);
    }
});

- Thanh Nguyen

---

创建了几个应用程序后，我发现有时候拥有一个刷新按钮比实施这个解决方法更好/更清晰。 - Thanh Nguyen

我不知道这个回答以前是否正确，但现在不再正确了。Backbone.history.loadUrl正好符合要求，请看我的回答。 - amiuhle

Answer 3

如果您想以所需的视图重新加载整个页面。这对于主页按钮可能有意义。优点是它将刷新内存。

在不加载任何路由（不使用“true”）的情况下前往任何路由，然后重新加载。

Backbone.history.navigate('route/goes/here');
window.location.reload();

- guya

Answer 4

解决方案是使用backbone.history.loadUrl。

如果主页是你的WebApp的根目录 /，则 Home 按钮的点击处理函数应为：

myAppRouter.navigate('');
Backbone.history.loadUrl();

- Synn

Answer 5

当屏幕方向发生变化时，我需要“刷新”我的页面，因为默认情况下并不会正确执行所有针对纵向模式的CSS媒体查询。这是我最终采取的方法：

Backbone.history.fragment = null;
Backbone.history.navigate(document.location.hash, true); 

当然，为了完整回答这个问题，这段代码被包装在一些方向变化处理代码中：

window.addEventListener('orientationchange', function () {
    Backbone.history.fragment = null;
    Backbone.history.navigate(document.location.hash, true); 
}, false);

- Bas Slagter

Answer 6

你也可以通过在URL末尾添加一个随机数字来进行无意义的更改：

var url = $(this).attr('href') + '?rand=' + Math.floor(Math.random() * 1000);
Backbone.history.navigate(url, true);

这对IE尤其有用，因为如果URL没有更改，它不会通过AJAX调用请求新数据。

- user2498689

Answer 7

您可以使用以下方法轻松地刷新页面：

@win_loc = window.location.toString().replace("#","")
Backbone.history.redirectTo(@win_loc)

- Sumit Munot

Answer 8

这是目前我最喜欢的方法：

 if (!Backbone.history.navigate(urlPath, true)) {
      Backbone.history.loadUrl();
 }

- Guy

Answer 9

这不是backbone的问题。在Chrome（webkit浏览器）中可以正常工作，但在Firefox中无法正常工作。这是浏览器行为

- RameshVel

Answer 10

http://localhost.com/和http://localhost.com/#!/之间的区别在于，第二个是指向锚点的链接，它不会加载页面，只会在当前页面中查找锚点，并在找到后滚动到该位置。您需要让您的链接看起来像第一个，末尾不要有"#"。

- clyfe