backbone.js - 防止在 Backbone pushState 上重新加载整页

Question

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

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

以下是我当前的代码:

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

Answer 1

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

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

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

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

至于这个:

此外，当我尝试打开同一个选项卡时，页面会再次重新加载。

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

如果您将“选项卡”称为站点用户界面的一部分，那么使用 e.preventDefault()在您的链接/“标签”上点击应该注意这一点。