Javascript 如何在主干应用程序中刷新页面

我正在使用主干网构建我的web应用程序

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

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

---

这有什么办法吗？这样，当我再次单击“主页”按钮（即再次调用同一URL）时，可以触发页面重新加载？

这不是主干。在chrome浏览器（webkit浏览器）中也可以，但在firefox中不行。它是一种浏览器行为

和之间的区别在于，第二个是指向锚定的链接，它不加载页面，它只在当前页面中查找锚定，如果找到，则滚动到该锚定。您需要使您的链接看起来像第一个链接，结尾处没有“#”。

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

主干中的代码。历史记录：

$(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);
    }
});

---

我需要在方向更改事件上“刷新”我的页面，因为在默认情况下，并不是所有的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);

---

如果您想用所需的视图重新加载整个页面。这可能会使“主页”按钮变得更简洁。它的优点是可以刷新内存

在不加载的情况下转到任何路由（不带“true”），然后重新加载

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

---

您通常可以修改路由以包含splat，这样您就可以在href的末尾附加一个随机字符串以使其唯一，但仍然与“主”路由匹配。（注意：这是您的最后一条路线。）

在路线中：

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

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

视图中的：

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

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

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

---

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

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

---

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

您正在查找的是

主干.history.loadUrl

。 从：

尝试加载当前URL片段。如果路由匹配成功，则返回

true

。如果没有定义的路由与片段匹配，则返回

false

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

主干中。查看
：

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

为了提供一个可重用的代码片段，我扩展了主干。使用helper方法查看，以便在需要重新加载同一页面时重用它，尽管主干路由器有限制

在我们的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>

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

希望对您有所帮助

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

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

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

backbone.history.loadUrl就是解决方案

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

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

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

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

在创建了一些应用程序之后，我发现有时使用刷新按钮比实施此解决方案更好/更清晰。我不知道这个答案是否正确，但现在已经不正确了
Backbone.history.loadUrl
做的正是需要的，请看我的答案。这是一个更好的答案：更短、更干净，而且它不涉及主干的“内部”（
Backbone.history.fragment
）。