防止Backbone pushState上的整页重新加载

Question

我正在尝试使用Backbone的pushState阻止整页重新加载.当我从视图的事件中调用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.

至于这个:

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

当用户为您网站的网址打开新的浏览器标签时,您在说什么？如果是这样,那么你无能为力.当浏览器打开选项卡时,它向服务器发出加载页面的请求.

但是,如果您将"标签"作为网站用户界面的一部分,那么使用e.preventDefault()链接/"标签"点击就可以解决这个问题.

Answer 2

答案实际上在这里/sf/answers/653221411/,如果您启用pushState,您希望链接工作,而不是像上面建议的那样阻止它们,或者好吧,不仅仅是阻止它们.这里是:

initializeRouter: function () {
  Backbone.history.start({ pushState: true });
  $(document).on('click', 'a:not([data-bypass])', function (evt) {

    var href = $(this).attr('href');
    var protocol = this.protocol + '//';

    if (href.slice(protocol.length) !== protocol) {
      evt.preventDefault();
      app.router.navigate(href, true);
    }
  });
}

Answer 3

 $('a').click(function(e){
   e.preventDefault();
   Backbone.history.navigate(e.target.pathname, {trigger: true});
 });