URL thay đổi Backbone.js mà không cần tải lại trang

Question

Tôi có trang web có trang người dùng. Trên trang đó, có một số liên kết cho phép bạn khám phá tiểu sử của người dùng. Tôi muốn thực hiện nó để khi một trong các liên kết đó được nhấp vào, url thay đổi, nhưng phần thứ ba trên cùng của trang chứa biểu ngữ của người dùng không tải lại.

Tôi đang sử dụng Backbone.js

Tôi có một cảm giác rằng tôi đang ở một trong những tình huống mà tôi có một sự hiểu biết kém của vấn đề tôi đang đối phó với điều đó tôi đang hỏi sai câu hỏi, vì vậy, vui lòng cho tôi biết nếu có vẻ như trường hợp này là

Answer 1

Sai lầm của tôi giả định rằng có một cách đặc biệt, tích hợp để làm điều này trong xương sống. Không có.

Đơn giản chỉ cần chạy dòng sau mã

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

sẽ gây ra URL của trình duyệt để thay đổi mà không tải lại trang. Bạn có thể mở bảng điều khiển javascript trong trình duyệt của mình ngay bây giờ và dùng thử với trang này. This article giải thích cách hoạt động chi tiết hơn (như được ghi chú trong this SO post).

Bây giờ tôi đã chỉ ràng buộc các sự kiện sau đây để các đối tượng tài liệu (Tôi đang chạy một trang web trang duy nhất):

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

Xem this post để biết thêm.

Lưu ý rằng bạn CÓ THỂ chuyển tùy chọn pushstate: true cho cuộc gọi của bạn tới Backbone.history.start(), nhưng điều này chỉ làm cho việc điều hướng trực tiếp đến một trang nhất định (ví dụ example.com/exampleuser/followers) sẽ kích hoạt tuyến đường trục chính thay vì đơn giản dẫn đến hư không.

Answer 2

Bộ định tuyến là bạn của bạn trong tình huống này. Về cơ bản, tạo một bộ định tuyến có nhiều tuyến khác nhau. Tuyến đường của bạn sẽ gọi các chế độ xem khác nhau. Các chế độ xem này sẽ chỉ ảnh hưởng đến các phần của trang mà bạn xác định. Tôi không chắc chắn nếu video này sẽ giúp đỡ, nhưng nó có thể cung cấp cho bạn một số ý tưởng về cách router tương tác với trang: http://www.youtube.com/watch?v=T4iPnh-qago

Dưới đây là một ví dụ thô sơ:

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

}); 

Sau đó, url của bạn sẽ trông như thế này : www.mydomain.com/#link1.

Ngoài ra, vì thẻ <a href=''></a> sẽ tự động gọi làm mới trang, hãy đảm bảo bạn đang gọi .preventDefault(); trên chúng nếu bạn không muốn trang làm mới.