Предотвращение полной перезагрузки страницы на Backstone PushState

Я пытаюсь предотвратить полную перезагрузку страницы, используя 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});

Ответ 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() на ваших кликах по ссылке/ "вкладке" должно позаботиться об этом.

Ответ 2

Ответ действительно находится здесь fooobar.com/questions/46613/..., если вы активируете 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);
    }
  });
}

Ответ 3

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

Ответ 4

Просто ответ на вопрос Дерика. Это сработало для меня, но чтобы он был чистым, я перезаписал класс Backbone.View:

(CoffeeScript)

class NewBackboneView extends Backbone.View
  events:
    'click a' : 'pushstateClick'

  pushstateClick: (event) ->
    event.preventDefault()

  Backbone.View = NewBackboneView

Таким образом, каждая ссылка из моих базовых представлений предотвращает дефолт.

Ответ 5

Это зависит от того, как вы создали HTML-разметку. Похоже, вы используете якорные теги (<a>), поэтому, если у этих якорных тегов href есть значения или даже пустая строка, вам нужно отменить поведение браузера по умолчанию, иначе вы получите перезагрузку страницы. Вы можете отменить поведение по умолчанию, используя jQuery're event.preventDefault(), как вы упомянули. В качестве альтернативы, если вас не волнует прогрессивное повышение или SEO, вы можете установить свой якорный тег href на # или javascript: void (0);, что также предотвратит перезагрузку страницы. например.

<a href="#">Click me</a>

или

<a href="javascript:void(0);">Click me</a>