Backbone.js và pushState

Question

Nếu tôi bật pushState trong bộ định tuyến đường trục, tôi có cần phải sử dụng return false trên tất cả các liên kết hay không xử lý trục chính tự động này? Có mẫu nào không, cả phần html và phần kịch bản.

Answer 1

Đây là mô hình Tim Branyen sử dụng trong boilerplate mình:

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

Sử dụng điều đó, chứ không phải là cá nhân làm preventDefault trên các liên kết, bạn hãy router xử lý chúng theo mặc định và có những ngoại lệ bằng việc có một thuộc tính data-bypass. Theo kinh nghiệm của tôi, nó hoạt động tốt như một khuôn mẫu. Tôi không biết về bất kỳ ví dụ tuyệt vời nào xung quanh, nhưng việc thử nó không phải là quá khó. vẻ đẹp Backbone của nằm trong sự đơn giản của nó;)

Answer 2

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

Answer 3

match() hoặc startsWith() (ES 6) cũng có thể được sử dụng để kiểm tra giao thức. Nếu bạn muốn hỗ trợ url tuyệt đối theo thuộc tính pathname, hãy kiểm tra url cơ sở theo 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(); 
    } 
} 

Answer 4

Bạn có thể ngăn chặn hành vi mặc định khi nhấp vào <a> thẻ bằng html. Chỉ cần thêm mã bên dưới vào trong thẻ <script />.

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