webentwicklung-frage-antwort-db.com.de

Backbone.js und PushState

Muss ich bei der Aktivierung von pushState im Backbone-Router für alle Links return false verwenden, oder führt der Backbone dies automatisch aus? Gibt es da draußen Beispiele, sowohl den HTML-Teil als auch den Skriptteil. 

37
Marcus

Dies ist das Muster, das Tim Branyen in seiner boilerplate verwendet:

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

Wenn Sie dies verwenden, können Sie den Router nicht mehr einzeln für die Verwendung von „hazardDefault“ für Links verwenden, sondern diese standardmäßig bearbeiten und mit einem data-bypass-Attribut Ausnahmen machen. Nach meiner Erfahrung funktioniert es gut als Muster. Ich kenne keine großartigen Beispiele, aber es sollte nicht zu schwer sein, es selbst auszuprobieren. Backbones Schönheit liegt in ihrer Einfachheit;)

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

match() oder startsWith() (ES 6) können auch zur Protokollprüfung verwendet werden. Wenn Sie absolute URLs mit der pathname-Eigenschaft unterstützen möchten, überprüfen Sie die Basis-URLs mit 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

Sie können das Standardverhalten des Klickens auf <a>-Tags in html verhindern. Fügen Sie einfach den untenstehenden Code in das <script />-Tag ein.

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