Zmiana adresu URL pliku Backbone.js bez przeładowania strony

Question

Mam witrynę ze stroną użytkownika. Na tej stronie znajduje się kilka linków, które umożliwiają zapoznanie się z profilem użytkownika. Chciałbym, aby po kliknięciu jednego z tych linków URL zmienił się, ale górna trzecia strona zawierająca baner użytkownika nie została ponownie załadowana.

Używam backbone.js

Mam wrażenie, że jestem w jednym z tych sytuacji, gdy mam taką słabe zrozumienie problemu mam do czynienia z tym pytam niewłaściwym pytanie, więc proszę dać mi znać, jeśli wydaje się, że tak jest.

Answer 1

Mój błąd polegał na założeniu, że istnieje specjalny, wbudowany sposób robienia tego w kręgosłupie. Nie ma.

prostu uruchamiając następującą linię kodu

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

spowoduje URL w przeglądarce zmianie bez przeładowania strony. W tej chwili możesz otworzyć konsolę javascript w swojej przeglądarce i wypróbować ją na tej stronie. This article wyjaśnia, jak to działa bardziej szczegółowo (jak odnotowano w this SO post).

Teraz mam tylko związany następujące zdarzenie do obiektu dokumentu (Biegnę pojedyncze miejsce strony):

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() 

Zobacz this post aby uzyskać więcej informacji.

Pamiętaj, że możesz przekazać opcję pushstate: true do swojego wywołania funkcji Backbone.history.start(), ale powoduje to, że nawigacja bezpośrednio do określonej strony (np. Example.com/exampleuser/followers) spowoduje uruchomienie szkieletu trasy, a nie prowadzący do nikąd.

Answer 2

Routery są twoim przyjacielem w tej sytuacji. Zasadniczo utwórz router, który ma kilka różnych tras. Twoje trasy będą wywoływać różne widoki. Te widoki będą miały wpływ tylko na części zdefiniowanej strony. Nie jestem pewien, czy ten film pomoże, ale może dać pewne wyobrażenie o tym, jak routery interakcję ze strony: http://www.youtube.com/watch?v=T4iPnh-qago

Oto prymitywny przykład:

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

}); 

Wtedy adres URL będzie wyglądać następująco : www.mydomain.com/#link1.

Ponadto, ponieważ znaczniki <a href=''></a> automatycznie wywołają odświeżenie strony, upewnij się, że wywołujesz .preventDefault(); na nich, jeśli nie chcesz odświeżać strony.