Cách sử dụng URL chuẩn trong Backbone.Router?

Question

Theo Backbone.js page:

Cho đến gần đây, những mảnh băm (#page) được sử dụng để cung cấp những Permalinks, nhưng với sự xuất hiện của API Lịch sử, nó bây giờ thể sử dụng URL chuẩn (/ trang).

Tôi cố gắng thêm quy tắc định tuyến này:

routes: { 
    'test': function() { 
    alert('ok'); } 
} 

Và gọi là Backbone.history.start({pushState: true, root: '/myroot/'}). Tôi có một liên kết trong trang của tôi là:

<a href="test">test me</a> 

tôi chặn sự kiện click của liên kết với:

$('a[href=test]').click(function(e) { 
    router.navigate('test'); 
    e.preventDefault(); }); 

Khi tôi bấm vào liên kết, yêu cầu không được thực hiện, mà tôi tin rằng đánh chặn là đã thành công. Nhưng sự kiện không được kích hoạt.

Vì vậy, hãy giúp tôi hiểu cách hoạt động của History API này. Hoặc chỉ ra nơi tôi đã làm sai.

Answer 1

Bạn cần phải bật pushState:

Backbone.history.start({pushState: true});

Liên kết của bạn sẽ buộc phải refresh lại đầy đủ từ máy chủ của bạn và máy chủ của bạn phải trả lời với nội dung của địa chỉ đó.

Bạn cần phải chặn nhấp chuột của liên kết đó và nói với router của bạn để điều hướng đến "test" tuyến đường:

myRouter.navigate("test");

Để biết thêm về HTML5 lịch sử api: http://diveintohtml5.info/history.html

đối với một số giới thiệu thông tin về mức sử dụng pushState với Backbone:

http://lostechies.com/derickbailey/2011/09/26/seo-and-accessibility-with-html5-pushstate-part-1-introducing-pushstate/

http://lostechies.com/derickbailey/2011/09/26/seo-and-accessibility-with-html5-pushstate-part-2-progressive-enhancement-with-backbone-js/

Và một đoạn video của một bài thuyết trình tôi đã bao gồm tất cả những điều này:

http://lostechies.com/derickbailey/2011/10/06/seo-and-accessibility-with-html5-pushstate-part-3-the-video/

Hy vọng rằng sẽ giúp.

Answer 2

Bạn sẽ cần phải thêm {trigger: true} vào cuộc gọi điều hướng để thực sự kích hoạt sự kiện định tuyến.

Answer 3

Để cho biết rằng bạn muốn sử dụng hỗ trợ HTML5 pushState trong đơn của mình, hãy sử dụng Backbone.history.start({pushState: true}). Nếu bạn muốn sử dụng pushState, nhưng có các trình duyệt không hỗ trợ nó nguyên bản sử dụng làm mới toàn bộ trang thay vào đó, bạn có thể thêm {hashChange: false} vào các tùy chọn.

PS! Nếu ứng dụng của bạn không được phục vụ từ url gốc / của tên miền của bạn, hãy chắc chắn để nói History nơi gốc thực sự là, như một tùy chọn (nếu không chuyển hướng sẽ không hoạt động!):

Backbone.history.start({pushState: true, root: "/public/search/"})