防止在 Backbone pushState 上重新加载整页 [英] Preventing full page reload on Backbone pushState

问题描述

我正在尝试使用 Backbone 的 pushState 防止重新加载整页.当我从我的视图事件中调用 navigate() 时，我看到下面标记为//1 的消息，但没有//2.此外，当我尝试打开同一个选项卡时，页面会再次重新加载.

I'm trying to prevent full page reloads using Backbone's pushState. When I call navigate() from my view's event, I see the messages marked // 1 below, but not // 2. In addition, when I try to open the same tab, the page reloads again.

我必须自己停止活动吗?我尝试使用 jQuery 的 preventDefault()，它确实会阻止页面重新加载，但我没有在任何地方看到过这种情况.

Must I stop the event myself? I tried using jQuery's preventDefault(), which does prevent the page reload, but I haven't seen this documented anywhere.

以下是我当前的代码:

App.Router = Backbone.Router.extend({
  routes:{
      "analytics":"analytics"
    , "realtime":"realtime"
  }

  , analytics:function(page) {
    console.log("analytics route hit: %o", page); // 2
  }

  , realtime:function(page) {
    console.log("realtime route hit: %o", page); // 2
  }
});

App.TabSetView = Backbone.View.extend({
  initialize:function() {
    this.collection.bind("reset", this.render, this);
    this.collection.bind("add", this.render, this);
    this.collection.bind("change", this.render, this);
    this.collection.bind("remove", this.render, this);
  }

  , events:{
      'click li.realtime a':  "onRealtime"
    , 'click li.analytics a': "onAnalytics"
  }

  , render:function() {
    // omitted for brevity
  }

  , onAnalytics:function() {
    console.log("onAnalytics"); // 1
    if (this.collection.activateAnalytics()) {
      App.app.navigate("analytics", true);
      this.render();
      console.log("navigated");
    } else {
      console.log("do nothing"); // 1
    }
  }

  , onRealtime:function() {
    console.log("onRealtime");
    if (this.collection.activateRealtime()) {
      App.app.navigate("realtime", true);
      this.render();
      console.log("navigated");
    } else {
      console.log("do nothing"); // 1
    }
  }
});

var tabs = ...; // omitted for brevity
var tabSetView = new App.TabSetView({collection: tabs});
var App.app = new App.Router;
Backbone.history.start({pushState:true});

推荐答案

要在用户单击链接时停止页面重新加载，您必须像建议的那样调用 e.preventDefault().

to stop the page reload when a user clicks a link, you have to call e.preventDefault() like you were suggesting.

MyView = Backbone.View.extend({
  events: {
    "click .some a": "clicked"
  },

  clicked: function(e){
    e.preventDefault();
    // do your stuff here
  }
});

这也没有在主干文档中记录也是对的.不过，事件由 jQuery 处理.所以你可以假设你会做的任何有效的 jQuery 事情 - 例如有一个 e 参数给事件回调 - 将与主干的 events 一起使用.

you're also right that this isn't documented in the backbone docs. events are handled by jQuery, though. so you can assume that any valid jQuery things you would do - such as have an e parameter to an event callback - will work with backbone's events.

至于:

in addition, when I try to open the same tab, the page reloads again.

你是说当用户打开一个新的浏览器标签到你网站的网址时?如果是这样，那么您对此无能为力.当浏览器打开选项卡时，它会向服务器发出加载页面的请求.

are you saying when a user opens a new browser tab to your site's url? if so, then there's nothing you can do about this. when the browser opens the tab it makes the request to the server to load the page.

如果您将标签"作为网站用户界面的一部分，那么在您的链接/标签"点击中使用 e.preventDefault() 应该小心

if you're referring to a "tab" as part of your site's user interface, though, then the use of e.preventDefault() on your link / "tab" clicks should take care of that.

这篇关于防止在 Backbone pushState 上重新加载整页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！