web-dev-qa-db-fra.com

Backbone.js et pushState

Si j'active PushState dans le routeur de réseau principal, dois-je utiliser return false sur tous les liens ou le réseau principal gère-t-il cela automatiquement? Existe-t-il des exemples, la partie html et la partie script?.

javascriptbackbone.js
37
Marcus

C'est le modèle que Tim Branyen utilise dans son passe-partout :

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

En utilisant cela, plutôt que de faire individuellement preventDefault sur les liens, vous laissez le routeur les gérer par défaut et faire des exceptions en ayant un attribut data-bypass. Dans mon expérience, cela fonctionne bien comme un motif. Je ne connais aucun excellent exemple dans ce domaine, mais l'essayer soi-même ne devrait pas être trop difficile. La beauté de Backbone réside dans sa simplicité;)

67
ggozad
 $(document.body).on('click', 'a', function(e){
   e.preventDefault();
   Backbone.history.navigate(e.currentTarget.pathname, {trigger: true});
 });
9
mynameistechno

match() ou startsWith() (ES 6) peut également être utilisé pour vérifier le protocole. Si vous souhaitez prendre en charge les URL absolues par la propriété pathname, vérifiez les URL de base par location.Origin.

function(evt) {
  var target = evt.currentTarget;
  var href = target.getAttribute('href');

  if (!href.match(/^https?:\/\//)) {
    Backbone.history.navigate(href, true);
    evt.preventDefault();
  }
  // or

  var protocol = target.protocol;

  if (!href.startsWith(protocol)) {
    // ...
  }
  // or

  // http://stackoverflow.com/a/25495161/531320
  if (!window.location.Origin) {
    window.location.Origin = window.location.protocol 
     + "//" + window.location.hostname
     + (window.location.port ? ':' + window.location.port: '');
  }

  var absolute_url = target.href;
  var base_url = location.Origin;
  var pathname = target.pathname;

  if (absolute_url.startsWith(base_url)) {
    Backbone.history.navigate(pathname, true);
    evt.preventDefault();
  }
}
1
masakielastic

Vous pouvez empêcher le comportement par défaut de cliquer sur les balises <a> en HTML. Ajoutez simplement le code ci-dessous dans la balise <script />.

<script>
$(document).on("click", "a", function(e)
{
    e.preventDefault();
    var href = $(e.currentTarget).attr('href');
    router.navigate(href, true);router
});
</script>
0
Sunil Kumar