Магистральный маршрутизатор навигации и привязки href

В приложении с поддержкой магистральной сети я видел код, который продолжает использовать <a href="#foo"></a>, в то время как щелчок привязки обрабатывается обработчиком опорных событий.

В качестве альтернативы, для навигации по #foo можно выполнить следующие действия:

Router.history.navigate("foo");

Я считаю, что последний является превосходным подходом, поскольку он позволяет легко переносить функции HTML5 pushState и обратно. И если мы будем использовать pushState, Backbone сможет грамотно деградировать до #foo для браузеров, которые не поддерживают pushState.

Как я еще новичок в Backbone, может ли кто-то более опытный и узнаваемый подтвердить, что это так?

Ответ 1

У меня есть pushState включен и используется подход, сделанный в шаблоне Тима Бранена добавления обработчика кликов, который отправляет все клики по ссылкам на navigate, если только они имеют атрибут data-bypass:

$(document).on("click", "a:not([data-bypass])", function(evt) {
  var href = { prop: $(this).prop("href"), attr: $(this).attr("href") };
  var root = location.protocol + "//" + location.host + Backbone.history.options.root;

  if (href.prop && href.prop.slice(0, root.length) === root) {
    evt.preventDefault();
    Backbone.history.navigate(href.attr, true);
  }
});

Это работает очень хорошо, и поскольку упоминания @nickf имеют то преимущество, что вам не нужно использовать хеш-хэш-хак, даже для браузеров, которые не поддерживают pushState.

Ответ 2

Вы должны написать свои ссылки как свои "правильные" адреса, то есть не с хешем, который является просто взломом, чтобы обойти некоторые недостатки конкретного браузера. Чтобы затем сделать все это, приложите обработчик кликов, чтобы поймать клики по этим элементам и передать URL-адреса в Backbone.history, которые затем могут использовать pushState или преобразовать в URL-адрес hashbang'd, если это необходимо. Например:

$(document).on('click', 'a[href^="/"]', function (event) {
    // here, ensure that it was a left-mouse-button click. middle click should be
    // allowed to pass through
    event.preventDefault();
    Backbone.history.navigate(this.href);
});

Ответ 3

Да. Я стараюсь использовать столько Router.history.navigate, сколько могу, в своих приложениях с базой данных. Это также имеет преимущество, если пользователь вводит URL-адрес "/foo" в своем браузере, "Магистраль" направляет его правильно. Очевидно, что если это внешняя ссылка или что-то, с чем вы не хотите обращаться с Backbone, вы не должны включать ее.

Ответ 4

Ответ Криса потрясающий, но есть одно дополнение к нему, которое делает его еще лучше. Backbone.history.navigate() действительно возвращает true или false, говоря нам, может ли он маршрутизировать его внутри. Поэтому мы можем пропустить атрибут data-bypass и вместо этого сделать следующее:

$(document).on("click", "a", function(evt) {
  var href = { prop: $(this).prop("href"), attr: $(this).attr("href") };
  var root = location.protocol + "//" + location.host + Backbone.history.options.root;

  if (href.prop && href.prop.slice(0, root.length) === root) {
    if (Backbone.history.navigate(href.attr, true)) {
      evt.preventDefault();
    }
  }
});