29

我正在使用骨干网来构建我的网络应用程序。

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

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

在此处输入图像描述

有没有办法解决？这样当我再次单击主页按钮即再次调用相同的 URL 时，我可以触发页面重新加载？

4

13 回答 13

42

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

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

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

events: {
  'click a#refresh': function() {
    Backbone.history.loadUrl();
    return false;
  }
}
于 2013-07-23T10:38:16.540 回答
28

查看backbone.js 源代码，似乎默认情况下这是不可能的，因为它只响应url 更改。而且由于单击相同的链接，您不会触发更改事件。

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);
    }
});
于 2012-01-24T18:22:36.837 回答
9

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

转到任何路线而不加载它（没有'true'）然后重新加载

Backbone.history.navigate('route/goes/here');
window.location.reload();
于 2012-07-09T09:23:11.700 回答
6

主干.history.loadUrl 是解决方案。

您的主页按钮的点击处理功能（如果主页是您的WebApp的根/）应该是：

myAppRouter.navigate('');
Backbone.history.loadUrl();
于 2014-05-11T19:04:54.373 回答
2

我需要在方向更改事件中“刷新”我的页面，因为默认情况下，并非所有纵向模式的 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);
于 2012-04-27T09:02:54.540 回答
1

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

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

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

于 2013-07-04T15:40:46.037 回答
1

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

@win_loc = window.location.toString().replace("#","")
Backbone.history.redirectTo(@win_loc)
于 2014-03-25T21:32:39.337 回答
0

这不是骨干。在 chrome（webkit 浏览器）中也可以正常工作，但在 Firefox 中却不行。它是一种浏览器行为

于 2012-01-17T20:54:47.893 回答
0

http://localhost.com/和http://localhost.com/#!/的区别在于第二个是指向锚点的链接，它不加载页面，它只在当前页面中寻找锚点，并在找到时滚动到它。你需要让你的链接看起来像第一个，没有“#”接近结束。

于 2012-01-17T20:58:07.970 回答
0

您通常可以修改您的路由以包含一个 splat，以便您可以将随机字符串附加到 href 的末尾以使其唯一，但仍与“home”路由匹配。（注意：将此作为您的最后一条路线。）

在路线：

routes: {
    "*str": "home"
}

在视图中：

render: function() {
    var data = {href: +(new Date())};
    _.extend(data, this.model.attributes);
    this.$el.html(this.template(data));
    return this;
}

在模板中（此处显示的车把）：

<a href="{{href}}">Home Link</a>
于 2013-06-25T11:59:37.450 回答
0

为了提供可重用的代码片段，我在 Backbone.View 中添加了一个辅助方法，以便在需要重新加载同一页面的任何地方重用它，尽管有 Backbone 路由器的限制。

在我们的 app.js 文件或任何其他适当的地方

Backbone.View = Backbone.View.extend({
    refreshPage: function(e){
        if(e.target.pathname){
            Backbone.history.navigate(e.target.pathname);
        }
        window.location.reload();           
    }
});

这样，如果我们有一个链接，例如

<a href="/whatever" id="whateverId">Some text </a>

在我们的视图中，我们只需要将 click 事件绑定到该回调以利用刷新页面功能，只要 refreshPage 助手可以通过原型链使用

events: {
    'click #whateverId': 'refreshPage', 
}

就我们不需要更改“a 标签”而言，这是一种更简洁的解决方案，可以节省一些样板代码

希望能帮助到你

于 2013-09-09T14:27:46.883 回答
0

它适用于 

 myBackboneRouter.navigate("users", {trigger: true})
于 2013-11-19T08:03:19.000 回答
0

到目前为止，这是我最喜欢的方法：

 if (!Backbone.history.navigate(urlPath, true)) {
      Backbone.history.loadUrl();
 }
于 2014-11-27T01:55:20.837 回答