Cách làm mới trang trong ứng dụng đường trục

Question

Tôi đang sử dụng xương sống để xây dựng ứng dụng web của mình.

Hiện tại tôi đang gặp phải sự cố khi tôi ở trên trang chủ, tôi không thể làm mới cùng một trang bằng cách chỉ cần nhấp lại vào nút 'trang chủ'.

Tôi tin rằng đây là giới hạn được cung cấp bởi xương sống (không tải lại trang nếu cùng một URL được gọi là)

Có cách nào để khắc phục điều này? Để tôi có thể kích hoạt tải lại trang khi tôi nhấp lại vào nút trang chủ, tức là gọi lại cùng một URL?

Answer 1

Nhìn vào nguồn backbone.js, có vẻ như mặc dù điều này là không thể theo mặc định, vì nó chỉ phản hồi lại thay đổi url. Và kể từ khi nhấp vào liên kết tương tự, bạn sẽ không kích hoạt sự kiện thay đổi.

Mã trong Backbone.History:

$(window).bind('hashchange', this.checkUrl); 

Bạn sẽ cần phải xử lý một tổ chức phi thay đổi chính mình. Dưới đây là những gì tôi đã làm:

$('.nav-links').click(function(e) { 
    var newFragment = Backbone.history.getFragment($(this).attr('href')); 
    if (Backbone.history.fragment == newFragment) { 
     // need to null out Backbone.history.fragement because 
     // navigate method will ignore when it is the same as newFragment 
     Backbone.history.fragment = null; 
     Backbone.history.navigate(newFragment, true); 
    } 
}); 

Answer 2

Đây không phải là xương sống tối đa. Các công trình tương tự tốt trong chrome (trình duyệt webkit), nhưng không có trong firefox. Hành vi của trình duyệt

Answer 3

Sự khác biệt giữa http://localhost.com/ và http://localhost.com/#!/ là thứ hai là liên kết để neo, nó không tải trang, nó chỉ tìm neo trong trang hiện tại và cuộn đến vị trí đó nếu tìm thấy. Bạn cần làm cho liên kết của bạn trông giống như cái đầu tiên, không có "#" gần hết.

Answer 4

tôi cần phải 'làm mới' trang của tôi về sự kiện thay đổi hướng vì không phải tất cả css truy vấn phương tiện truyền thông của tôi cho chế độ dọc nơi thực hiện một cách chính xác theo mặc định. Đây là những gì tôi đã kết thúc thực hiện:

Backbone.history.fragment = null; 
Backbone.history.navigate(document.location.hash, true); 

Tất nhiên, về tính đầy đủ của câu trả lời này, điều này đã được bọc trong một số mã xử lý sự thay đổi định hướng:

window.addEventListener('orientationchange', function() { 
    Backbone.history.fragment = null; 
    Backbone.history.navigate(document.location.hash, true); 
}, false); 

Answer 5

Trong trường hợp bạn muốn tải lại toàn bộ trang có chế độ xem mong muốn. Điều này có thể làm cho các sen cho nút home. Ưu điểm sẽ là nó sẽ làm mới bộ nhớ.

Đến bất kỳ tuyến đường mà không cần nạp nó (không có 'true') và sau đó tải lại

Backbone.history.navigate('route/goes/here'); 
window.location.reload(); 

Answer 6

Bạn thường có thể sửa đổi tuyến đường của bạn để bao gồm một splat, do đó bạn có thể thêm một chuỗi ngẫu nhiên đến cùng của một href để làm cho nó độc đáo, nhưng vẫn phù hợp với "nhà" tuyến đường. (Lưu ý: làm cho tuyến đường cuối cùng của bạn.)

Ở routes:

routes: { 
    "*str": "home" 
} 

Trong giao diện:

render: function() { 
    var data = {href: +(new Date())}; 
    _.extend(data, this.model.attributes); 
    this.$el.html(this.template(data)); 
    return this; 
} 

Trong mẫu (tay lái đưa ra ở đây):

<a href="{{href}}">Home Link</a> 

Answer 7

Bạn cũng có thể chỉ cần thực hiện một sự thay đổi có ý nghĩa để các url bằng cách thêm một số ngẫu nhiên đến cuối cùng:

var url = $(this).attr('href') + '?rand=' + Math.floor(Math.random() * 1000); 
Backbone.history.navigate(url, true); 

Điều này đặc biệt hữu ích cho trình duyệt IE vì nó sẽ không yêu cầu dữ liệu mới thông qua một cuộc gọi AJAX nếu url có không đã thay đổi.

Answer 8

Bạn đang tìm kiếm Backbone.history.loadUrl. Từ số Annotated Source:

Cố gắng tải đoạn URL hiện tại. Nếu tuyến đường thành công với kết quả phù hợp, hãy trả lại true. Nếu không có tuyến đường được xác định nào phù hợp với đoạn, trả về false.

Vì vậy, đối với một liên kết làm mới đơn giản, bạn có thể thêm các sự kiện sau đây để Backbone.View của bạn:

events: { 
    'click a#refresh': function() { 
    Backbone.history.loadUrl(); 
    return false; 
    } 
} 

Answer 9

Để cung cấp một đoạn tái sử dụng mã tôi tăng cường các Backbone.View với một phương pháp helper để tái sử dụng nó bất cứ nơi nào chúng ta cần phải tải lại cùng một trang mặc dù các giới hạn router Backbone.

Trong file app.js của chúng tôi hoặc bất kỳ vị trí thích hợp khác

Backbone.View = Backbone.View.extend({ 
    refreshPage: function(e){ 
     if(e.target.pathname){ 
      Backbone.history.navigate(e.target.pathname); 
     } 
     window.location.reload();   
    } 
}); 

cách này, nếu chúng ta có một liên kết như

<a href="/whatever" id="whateverId">Some text </a> 

Trong Xem chúng tôi sẽ chỉ cần để ràng buộc sự kiện click để gọi lại đó để tận dụng tính năng trang làm mới, theo như trình trợ giúp refreshPage sẽ có sẵn thông qua chuỗi mẫu thử nghiệm

events: { 
    'click #whateverId': 'refreshPage', 
} 

Theo như chúng tôi không cần phải thay đổi "thẻ" đó là một giải pháp sạch sẽ tiết kiệm một số mã hóa soạn sẵn

Hy vọng nó giúp

Answer 10

Nó hoạt động với

myBackboneRouter.navigate("users", {trigger: true}) 

Answer 11

Bạn có thể dễ dàng làm mới trang bằng cách sử dụng phương pháp dưới đây:

@win_loc = window.location.toString().replace("#","") 
Backbone.history.redirectTo(@win_loc) 

Answer 12

Backbone.history.loadUrl là giải pháp.

Cú click chức năng của nút Home của bạn xử lý (nếu nhà là gốc rễ/của WebApp của bạn) nên:

myAppRouter.navigate(''); 
Backbone.history.loadUrl(); 

Answer 13

Dưới đây là cách tiếp cận yêu thích của tôi cho đến nay:

if (!Backbone.history.navigate(urlPath, true)) { 
     Backbone.history.loadUrl(); 
}