如何刷新骨干应用程序中的页面

Question

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

目前我遇到一个问题，如果我在主页上，我再也无法点击“主页”按钮刷新同一页面。

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

这有什么办法吗？当我再次点击主页按钮，即再次调用相同的URL时，我可以触发页面重新加载？

Answer 1

您正在寻找Backbone.history.loadUrl。 来自Annotated Source：

  

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

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

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

Answer 2

查看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);
    }
});

Answer 3

如果您想要使用所需视图重新加载整个页面。这可能会使主页按钮变为senes。优点是它会刷新内存。

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

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

Answer 4

backbone.history.loadUrl是解决方案。

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

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

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);

Answer 6

您还可以通过在结尾添加随机数来对网址进行无意义的更改：

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

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

Answer 7

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

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

Answer 8

这不是主干。同样适用于chrome（webkit浏览器），但不适用于firefox。它是一种浏览器行为

Answer 9

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

Answer 10

您通常可以修改路线以包含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>

Answer 11

为了提供可重复使用的代码片段，我使用辅助方法扩充了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', 
}

只要我们不需要更改“标签”，它就是一个更清洁的解决方案，可以节省一些样板编码

希望有所帮助

Answer 12

适用于

 myBackboneRouter.navigate("users", {trigger: true})

Answer 13

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

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