Backbone.js URL ändern, ohne die Seite neu zu laden

Question

Ich habe eine Website, die eine Benutzerseite hat. Auf dieser Seite gibt es mehrere Links, mit denen Sie das Profil des Benutzers erkunden können. Ich möchte es so machen, dass, wenn einer dieser Links angeklickt wird, die URL sich ändert, aber das obere Drittel der Seite, die das Banner des Benutzers enthält, wird nicht neu geladen.

Ich verwende Backbone.js

Ich habe das Gefühl, dass ich in einem dieser Situation bin, wo ich so ein schlechtes Verständnis des Problems habe ich mit, dass zu tun habe ich frage die falsche Frage, so lassen Sie mich bitte wissen, wenn das der Fall zu sein scheint

Answer 1

Mein Fehler ging davon aus, dass es eine spezielle, eingebaute Möglichkeit gab, dies im Backbone zu tun. Es ist nicht.

einfach läuft die folgende Codezeile

window.history.pushState('object or string', 'Title', '/new-url'); 

verursacht URL Ihres Browsers ohne Neuladen der Seite zu ändern. Sie können jetzt die Javascript-Konsole in Ihrem Browser öffnen und es mit dieser Seite versuchen. This article erklärt, wie es genauer funktioniert (wie in this SO post notiert).

Jetzt habe ich gebunden gerade das folgende Ereignis auf das Dokumentobjekt (Ich bin eine einzelne Seite Website läuft):

bindEvents:() -> 
    $(document).on('click', 'a', @pushstateClick) 


pushstateClick: (e) -> 
    href = e.target.href || $(e.target).parents('a')[0].href 
    if MyApp.isOutsideLink(href) == false 
     if e.metaKey 
         #don't do anything if the user is holding down ctrl or cmd; 
         #let the link open up in a new tab 
     else 
      e.preventDefault() 
      window.history.pushState('', '', href); 
      Backbone.history.checkUrl() 

Siehe für weitere Informationen this post.

Beachten Sie, dass Sie die Option pushstate: true an Ihren Aufruf von Backbone.history.start() weitergeben können, dies jedoch lediglich dafür sorgt, dass das Navigieren direkt zu einer bestimmten Seite (z. B. example.com/exampleuser/followers) ausgelöst wird Backbone-Route statt einfach ins Nirgendwo führen.

Answer 2

Router sind Ihr Freund in dieser Situation. Im Grunde erstellen Sie einen Router mit mehreren verschiedenen Routen. Ihre Routen rufen unterschiedliche Ansichten auf. Diese Ansichten wirken sich nur auf die Teile der Seite aus, die Sie definieren. Ich bin mir nicht sicher, ob das Video helfen, aber es kann Ihnen eine Vorstellung davon geben, wie Router Interaktion mit der Seite: http://www.youtube.com/watch?v=T4iPnh-qago

hier ein rudimentäres Beispiel:

myapp.Router = Backbone.Router.extend({ 

    routes: { 
     'link1': 'dosomething1', 
     'link2': 'dosomething2', 
     'link3': 'dosomething3' 
    }, 

    dosomething1: function() { 
     new myapp.MyView(); 
    }, 
    dosomething2: function() { 
     new myapp.MyView2(); 
    }, 
    dosomething3: function() { 
     new myapp.MyView3(); 
    } 

}); 

dann Ihre URL wird wie folgt aussehen : www.mydomain.com/#link1.

Auch, weil <a href=''></a> Tags automatisch eine Seite aktualisieren, stellen Sie sicher, dass Sie aufrufen. PreventDefault(); wenn sie nicht möchten, dass die Seite aktualisiert wird.