对骨干pushState的preventing重新加载整个页面 [英] Preventing full page reload on Backbone pushState

问题描述

我试图用骨干pushState的prevent整个页面重新加载。当我打电话从我的观点的事件导航（），我看到这些消息标志着// 1以下，但不// 2.此外，当我尝试打开相同的标签，页面重新加载一次。

我必须停止活动自己？我试着使用jQuery的preventDefault（），这确实prevent的页面重载，但我还没有看到任何地方这个记录。

下面是我目前的code：

  App.Router = Backbone.Router.extend（{
  路线：{
      分析：分析
    实时：实时
  }  ，分析：功能（页）{
    的console.log（分析路径命中：％O，页）; // 2
  }  ，实时：功能（页）{
    的console.log（实时路线击：％O，页）; // 2
  }
}）;App.TabSetView = Backbone.View.extend（{
  初始化：功能（）{
    this.collection.bind（复位，this.render，这一点）;
    this.collection.bind（增加，this.render，这一点）;
    this.collection.bind（变，this.render，这一点）;
    this.collection.bind（删除，this.render，这一点）;
  }  ，事件：{
      点击li.realtime一个：onRealtime
    点击li.analytics一个：onAnalytics
  }  ，渲染：功能（）{
    //为简洁起见省略
  }  ，onAnalytics：功能（）{
    的console.log（onAnalytics）; // 1
    如果（this.collection.activateAnalytics（））{
      App.app.navigate（分析，真正的）;
      this.render（）;
      的console.log（导航）;
    }其他{
      的console.log（什么都不做）; // 1
    }
  }  ，onRealtime：功能（）{
    的console.log（onRealtime）;
    如果（this.collection.activateRealtime（））{
      App.app.navigate（实时，真正的）;
      this.render（）;
      的console.log（导航）;
    }其他{
      的console.log（什么都不做）; // 1
    }
  }
}）;变种分页= ...; //为简洁起见省略
VAR tabSetView =新App.TabSetView（{集：标签}）;
VAR App.app =新App.Router;
Backbone.history.start（{pushState的：真正}）;
 

解决方案

要停止重新加载页面，当用户点击一个链接，你必须调用即preventDefault（）像你暗示。

 
MyView的= Backbone.View.extend（{
  事件：{
    点击。有些一：点击
  }，  点击：功能（E）{
    亦即preventDefault（）;
    //做你的东西在这里
  }
}）;
 

你也对，这不是在骨干文档记录。事件是由jQuery的处理，虽然。所以你可以假设任何有效的jQuery的东西，你会做 - 比如有一个电子参数将事件回调 - 将与骨干事件工作。

为这样：

此外，当我试图打开相同的标签，页面重新加载再次

当用户打开一个新的浏览器选项卡到您的网站的网址你说什么？如果是这样，那么还有什么可以做这件事。当浏览器中打开的标签它使请求到服务器加载页。

如果你指的是标签作为网站的用户界面的一部分，虽然，那么使用即preventDefault的（）您链接/选项卡点击应采取照顾。

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.

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.

Below is my current code:

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

解决方案

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

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.

as for this:

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.

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.

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